Text direction based on locale

[ahnpnl]

In i18next, they have an api called dir which accepts a locale to return text direction value, I guess it is based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo

Is it something we can provide to extend the existing this lib, for example SpeakLocale can be extended?

[robisim74]

Hi @ahnpnl ,

in i18next, directions seem to be mapped internally https://github.com/i18next/i18next/blob/master/src/i18next.js#L505

Unfortunately getTextInfo of Intl locale doesn't seem fully supported yet: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo#browser_compatibility

I was thinking of adding dir?: 'ltr' | 'rtl' property to SpeakLocale, to be set at configuration time:

supportedLocales: [
    { lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles', dir: 'ltr' },
    ...
  ],

What do you think?

[ahnpnl]

Ye i think that is a nice addition :)

I was checking in Qwik today to see if there is an API to add dir to html like locale does but nothing there yet. I think we can request such API for RequestEvent

[robisim74]

It shouldn't need an API, we can use it with containerAttributes

entry.ssr.tsx

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {
    ...
    containerAttributes: {
      lang: opts.serverData?.locale || config.defaultLocale.lang,
      dir: odir: config.supportedLocales.find(x => x.lang === opts.serverData?.locale)?.dir || config.defaultLocale.dir || 'auto',  // Here (edited)
      ...opts.containerAttributes,
    }
  });
}

[ahnpnl]

Ah ha, that’s good to know. So containerAtrributes means for the place where q:container locates on.

[robisim74]

Supported in v0.15.0