I18n-module: [Feature Request] Add dir attribute for each locale

Created on 10 Jun 2020 · 9Comments · Source: nuxt-community/i18n-module

Is your feature request related to a problem? Please describe.

I'm using this package to translate my app, and now I'm adding an RTL locale.
It would be great if nuxt-i18n could manage the body dir attribute.

Describe the solution you'd like

I propose to add a dir property for each locale in the module (values would be rtl, ltr or auto by default). For example:

// nuxt.config.js, inside nuxt-i18n module

locales: [
  { code: 'ar', iso: 'ar', file: 'ar/app.js', dir: 'rtl' },
  { code: 'en', iso: 'en-US', file: 'en/app.js', dir: 'ltr' },
  { code: 'fr', iso: 'fr-FR', file: 'fr/app.js', dir: 'ltr' },
],

Then this would be added in the HTML by setting a new dir attribute at a very top level of the document, for example in the <html> or <body> tag. I think it's a mandatory feature for an i18n repo 😊

Describe alternatives you've considered

As for now I'm using a custom plugin and adding the dir property as soon as I can:

// plugins/ltr-rtl.js

export default function({ app }, inject) {
  const dir = () => app.i18n.locales.find((x) => x.code === app.i18n.locale)?.dir;
  inject( 'dir', dir);
}

<!-- layouts/default.vue -->

<div id="app" :dir="$dir()">
  My app here...
</div>

What do you think? 😊

feature-request good first issue

Source

HapLifeMan

❤2 👍1

Most helpful comment

Great idea and should be easy to do. :)

rchl on 24 Jun 2020

😄2

All 9 comments

RTL always has so little support, so I'm happy to see it being brought up!

I have a similar issue that I'm trying to resolve. I tried two different solutions, and both are unsatisfactory. I'm still fairly new to Nuxt, so I'm not 100% sure this is the right approach. It would be good to create a more "standard" way of solving the rtl problem.

js export default function({ app }) { // beforeLanguageSwitch called right before setting a new locale app.i18n.beforeLanguageSwitch = (oldLocale, newLocale) => { app.head.htmlAttrs = { lang: newLocale, dir: newLocale == "ar" ? "rtl" : "ltr" } } }
Nevertheless, it would be great to have a $dir property to use where needed.

majdal on 17 Jun 2020

Hey @rchl, I would really love to have your opinion 😊

HapLifeMan on 24 Jun 2020

Great idea and should be easy to do. :)

rchl on 24 Jun 2020

😄2

You can also target the direction CSS property as a workaround - https://developer.mozilla.org/en-US/docs/Web/CSS/direction
e.g.

html[lang="ar-SA"] {
  direction: rtl;
}

glenpike on 14 Jul 2020

@glenpike Using the HTML attribute is way much better than the CSS property 😊

HapLifeMan on 15 Jul 2020

@glenpike Using the HTML attribute is way much better than the CSS property 😊

Hi, yes, sorry, should have commented this was a workaround.

glenpike on 15 Jul 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.