[Feature Request] Add dir attribute for each locale #762

HapLifeMan · 2020-06-10T15:46:06Z

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? 😊

The text was updated successfully, but these errors were encountered:

majdal · 2020-06-17T11:17:06Z

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.

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.

HapLifeMan · 2020-06-24T18:35:42Z

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

rchl · 2020-06-24T18:58:31Z

Great idea and should be easy to do. :)

glenpike · 2020-07-14T10:51:46Z

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;
}

HapLifeMan · 2020-07-15T08:50:20Z

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

glenpike · 2020-07-15T11:06:38Z

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

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

stale · 2020-09-13T16:29:04Z

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.

HapLifeMan · 2020-10-14T08:30:50Z

Hi @rchl, any news on this feature request? 😊

francisceril · 2020-10-19T09:11:40Z

Is the feature already added?

rchl · 2021-02-01T09:26:20Z

Resolved through #1023 and released in https://github.com/nuxt-community/i18n-module/releases/tag/v6.19.0.

See the dir property in https://i18n.nuxtjs.org/options-reference#locales

aliwesome · 2021-12-28T14:15:36Z

@rchl How can we get that property in pages or components?

rchl · 2022-01-03T15:18:19Z

@aliwesome not sure what you mean exactly but you need to add this in the default layout or individual pages:

export default {
  head () {
    return this.$nuxtI18nHead()
  }
}

Mo7ammedMamdou7 · 2022-03-03T23:56:06Z

I made this solution and worked fine:
First, create 'localize.js' as a plugin file in the plugins folder and add this code :

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    if (app.i18n.locale === 'ar') {
      app.head.htmlAttrs.dir = 'rtl'
      app.head.htmlAttrs.lang = 'ar'
    } else {
      app.head.htmlAttrs.dir = 'ltr'
      app.head.htmlAttrs.lang = 'en'
    }
  })
}

This file will be imported to the nuxt.config.js file :

plugins: [
    '~/plugins/localize.js',
  ],

Then, Go to your nav component file and add this head function in your script to handle route changes:

head() {
    if (this.$i18n.locale === 'ar') {
      return {
        htmlAttrs: {
          lang: 'ar',
          dir: 'rtl',
        },
      }
    } else {
      return {
        htmlAttrs: {
          lang: 'en',
          dir: 'ltr',
        },
      }
    }
  },

iifawzi · 2022-03-04T00:04:19Z

@Mo7ammedMamdou7
it's now supported out of the box.
https://i18n.nuxtjs.org/options-reference/#locales
Ref: #1023

Mo7ammedMamdou7 · 2022-03-04T00:33:00Z

@Mo7ammedMamdou7 it's now supported out of the box. https://i18n.nuxtjs.org/options-reference/#locales Ref: #1023

Yes, bro thanks a lot for your support,
This is the configuration I made and worked fine:
First, I add this code to the i18n config in the nuxt.config.js file:

locales: [
      {
        code: 'ar',
        name: 'Arabic',
        iso: 'ar-UAE',
        file: 'ar.js',
        dir: 'rtl',
      },
      {
        code: 'en',
        name: 'English',
        iso: 'en-US',
        file: 'en.js',
        dir: 'ltr',
      },
    ],

Then I added this code to default.vue layout file:

head() {
    return this.$nuxtI18nHead({ addDirAttribute: true, addSeoAttributes: true })
  },

AmirrezaJM · 2023-01-15T19:02:52Z

I wrote it on nuxt3(vue3) but I can't switch between dir and lang for each locale
How I should fix it?
my default.vue layout file :

const head = useLocaleHead({
  addDirAttribute: true,
  addSeoAttributes: true
})

useHead({
  htmlAttrs: {
    lang: head.value.htmlAttrs!.lang,
    dir: head.value.htmlAttrs!.dir
  },
})


my i18n config in nuxt.cofing.ts file:

i18n: {
    locales: [
        {
            code: 'fa',
            iso: 'fa-IR',
            name: 'Farsi',
            file: 'fa-IR.json',
            dir: 'rtl',
        },
        {
            code: 'en',
            iso: 'en-US',
            name: 'English',
            file: 'en-US.json',
            dir: 'ltr',
        },
    ],
    defaultLocale: 'fa',
    detectBrowserLanguage: false,
    langDir: "lang",
     // & add `vueI18n` option to `@nuxtjs/i18n` module options
    vueI18n: {
        legacy: false,
        fallbackLocale: 'fa',
    }
}

momurad18 · 2023-12-13T11:57:02Z

useLocaleHead

you need to add this to your layout

<Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">your template</Html>

HapLifeMan changed the title ~~Add dir attribute for each locale~~ [Feature Request] Add dir attribute for each locale Jun 10, 2020

rchl added the feature request label Jun 24, 2020

glenpike mentioned this issue Jul 15, 2020

Improve handling of rtl text like Arabic CoderDojo/coderdojo.com#66

Closed

stale bot added the stale label Sep 13, 2020

stale bot closed this as completed Sep 20, 2020

rchl reopened this Sep 20, 2020

stale bot removed the stale label Sep 20, 2020

rchl added the good first issue label Dec 6, 2020

iifawzi mentioned this issue Jan 12, 2021

feat: add dir property and defaultDirection option #1023

Merged

rchl closed this as completed Feb 1, 2021

nuxt-modules locked and limited conversation to collaborators Dec 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Request] Add dir attribute for each locale #762

[Feature Request] Add dir attribute for each locale #762

HapLifeMan commented Jun 10, 2020 •

edited

Loading

majdal commented Jun 17, 2020

HapLifeMan commented Jun 24, 2020 •

edited

Loading

rchl commented Jun 24, 2020

glenpike commented Jul 14, 2020

HapLifeMan commented Jul 15, 2020

glenpike commented Jul 15, 2020

stale bot commented Sep 13, 2020

HapLifeMan commented Oct 14, 2020

francisceril commented Oct 19, 2020 •

edited

Loading

rchl commented Feb 1, 2021

aliwesome commented Dec 28, 2021

rchl commented Jan 3, 2022 •

edited

Loading

Mo7ammedMamdou7 commented Mar 3, 2022

iifawzi commented Mar 4, 2022 •

edited

Loading

Mo7ammedMamdou7 commented Mar 4, 2022

AmirrezaJM commented Jan 15, 2023 •

edited

Loading

momurad18 commented Dec 13, 2023

[Feature Request] Add dir attribute for each locale #762

[Feature Request] Add dir attribute for each locale #762

Comments

HapLifeMan commented Jun 10, 2020 • edited Loading

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

Describe the solution you'd like

Describe alternatives you've considered

majdal commented Jun 17, 2020

HapLifeMan commented Jun 24, 2020 • edited Loading

rchl commented Jun 24, 2020

glenpike commented Jul 14, 2020

HapLifeMan commented Jul 15, 2020

glenpike commented Jul 15, 2020

stale bot commented Sep 13, 2020

HapLifeMan commented Oct 14, 2020

francisceril commented Oct 19, 2020 • edited Loading

rchl commented Feb 1, 2021

aliwesome commented Dec 28, 2021

rchl commented Jan 3, 2022 • edited Loading

Mo7ammedMamdou7 commented Mar 3, 2022

iifawzi commented Mar 4, 2022 • edited Loading

Mo7ammedMamdou7 commented Mar 4, 2022

AmirrezaJM commented Jan 15, 2023 • edited Loading

momurad18 commented Dec 13, 2023

HapLifeMan commented Jun 10, 2020 •

edited

Loading

HapLifeMan commented Jun 24, 2020 •

edited

Loading

francisceril commented Oct 19, 2020 •

edited

Loading

rchl commented Jan 3, 2022 •

edited

Loading

iifawzi commented Mar 4, 2022 •

edited

Loading

AmirrezaJM commented Jan 15, 2023 •

edited

Loading