Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n support for different fonts #2861

Closed
ddx-510 opened this issue Sep 6, 2024 · 2 comments
Closed

i18n support for different fonts #2861

ddx-510 opened this issue Sep 6, 2024 · 2 comments

Comments

@ddx-510
Copy link

ddx-510 commented Sep 6, 2024

Is your feature request related to a problem? Please describe.
I am currently using this library for a multi-language platform. So when doing the i18n support, I found it quite troublesome to find a suitable font and then load it accordingly.
Describe the solution you'd like
Is it possible for the library to have a more variety of build-in font support for different languages.

@ddx-510
Copy link
Author

ddx-510 commented Sep 6, 2024

Currently I am using a workaround to fix the issue, so I have a dynamic font loader

export const LocalizationLoad = (currentLocale: string) => {
  switch (currentLocale) {
    case LanguageEnum.EN_US:
      Font.register({
        family: 'NotoSans',
        src: 'https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf',
      })
      return 'NotoSans'
    case LanguageEnum.ZH_CN:
      Font.register({
        family: 'NotoSansSC',
        src: 'https://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf',
      })
      return 'NotoSansSC'
    case LanguageEnum.TH_TH:
      Font.register({
        family: 'NotoSansThai',
        src: 'https://fonts.gstatic.com/s/notosansthai/v25/iJWnBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcd1MKVQt_So_9CdU5RtpzE.ttf',
      })
      return 'NotoSansThai'
    case LanguageEnum.JA_JP:
      Font.register({
        family: 'NotoSansJP',
        src: 'https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj75s.ttf',
      })
      return 'NotoSansJP'
    default:
      return 'Helvetica'
  }
}

Then in my main component, I use document.documentElement.lang as a dependency and trigger my LocalizationLoad dynamically in useEffect hooks.

But this method is not perfect, I cannot have two languages in the same pdf file which is a big feature I would like to have... Anyone can solve this issue?

@ddx-510
Copy link
Author

ddx-510 commented Sep 9, 2024

Oh for anyone who has encountered the same issue, this issue is actually solved in font callback pr, just that the type is not being updated, and it is not mentioned in the doc, #2727.

The type is fixed in this pr and we can use font callback now yey! just @ts-ignore the fontFamily types and pass in an array of fonts

So in my case I can just return

 Font.register({
        family: 'NotoSans',
        src: 'https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf',
      })
 Font.register({
        family: 'NotoSansSC',
        src: 'https://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf',
      })
  Font.register({
        family: 'NotoSansThai',
        src: 'https://fonts.gstatic.com/s/notosansthai/v25/iJWnBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcd1MKVQt_So_9CdU5RtpzE.ttf',
      })
 Font.register({
        family: 'NotoSansJP',
        src: 'https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj75s.ttf',
      })
return ['NotoSans', 'NotoSansSC', 'NotoSansThai', 'NotoSansJP'] 

@ddx-510 ddx-510 closed this as completed Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant