Vuetify: [Discussion] RTL <3

Created on 5 Oct 2017 · 13Comments · Source: vuetifyjs/vuetify

This file rtl.pdf contains my ideas for RTL/LTR Support, please read it.
And stylus.zip contains the RTL'ed files that i made.

rtl.pdf
stylus.zip

on hold

Source

NadhirBoukhenifra

👍1

Most helpful comment

Great discussion. with 2.0 on the horizon, we will be providing full rtl support!

Thank you for your contribution and interest in improving Vuetify! Make sure to join us in the Discord community. 👍

MajesticPotatoe on 15 Jan 2019

❤1 🎉1 👍1

All 13 comments

Can you make this a PR instead of a zip file? It'd make it a lot easier to see what you've changed.

KaelWD on 5 Oct 2017

@KaelWD i can't now, until we start with process that i mentioned inside rtl.pdf,
and the files contains only the RTL Support Code for all files inside stylusfolder.
and its not file or two, there is a lot.

NadhirBoukhenifra on 5 Oct 2017

2 thoughts

i believe that it's possible to do in stylus something like this

dir($start, $end)
  .some-class
    margin-{start}: 8px
    margin-{end}: 0

and then

dir('left', 'right')

for LTR, and

dir('right', 'left')

for RTL

That could allow to have common base and avoid duplication

some poeple may want to include both LTR and RTL at the same time, so i guess the .rtl.styl should do

[dir="rtl"]
  dir('right', 'left')

jacekkarczmarczyk on 6 Oct 2017

Well,

{Start} and {End} method Great, i'm not very experienced with stylus. but i support DRY :).
my point is to let users use ONLY what they want.

LTR & RTL at same time? i don't think that anyone do that! Or you mean like that:

<link href="https://unpkg.com/vuetify/dist/vuetify.css" rel="stylesheet">
If (Dir == “rtl”)
<link href="https://unpkg.com/vuetify/dist/rtl.css" rel="stylesheet">
Fi

I've worked as Freelancer at fiverr with RTL Support GIG.

i believe that the users divided into:

User Latin Only (LTR)
User Arabic Only (RTL)
User Multi-Language (RTL First)
User Multi-Language (LTR First)

see this four picture, they are in A4 size, and i loaded them in PDF file included below.
just to figure the problems, and choose the right solution.
1.

and im waiting for you to choose the process to start RTL, i mean what files will be generated at the end.

rtl_discussion.pdf

NadhirBoukhenifra on 6 Oct 2017

What I mean in 2. is the you could load all three css:

<link href="vuetify.base.css">
<link href="vuetify.rtl.css">
<link href="vuetify.ltr.css">

and switch LTR <-> RTL by adding/removing dir attr to <html> (when user clicks "change language"). It will load 290kB and cache

jacekkarczmarczyk on 6 Oct 2017

👍1

I'm not really a fan of most people having to load two CSS files. The default build should be LTR, and RTL support can either be an entire new file for RTL-only, or a smaller addon for the base file to allow both.

LTR only: vuetify.css
RTL only: vuetify.rtl.css
LTR + RTL: vuetify.css and vuetify.rtl-plugin.css (or maybe combine them and just have vuetify.universal.css?)

KaelWD on 6 Oct 2017

If choose the direction of adding .css files, I think it needs all possibilities:

vuetify.base.css (without LTR or RTL styles)
vuetify.ltr.css (only LTR styles)
vuetify.rtl.css (only RTL styles)
vuetify-ltr-only.css (base + LTR styles)
vuetify-rtl-only.css (base + RTL styles)
vuetify.css (base + LTR + RTL styles)

For example, moment.js did this with the locales files. They have a single file for moment.js, another file for moment-with-locales.js and separated files for each locale. https://cdnjs.com/libraries/moment.js

In this way, it's up to the developer to choose the better solution for their product. So, we can either load every styles at once or lazy load them depending on the user language or locale.

peluprvi on 6 Oct 2017

👍3

Just to add more to this discussion:

Material guidelines:
https://material.io/guidelines/usability/bidirectionality.html

The application can have both LTR and RTL elements in the same page. The last example of the Material guidelines displays different languages in the text. Application examples: simultaneous languages like Google Translate. In my option the most usage of this will be only text alignment.

Icons can be a little tricky.

peluprvi on 6 Oct 2017

Love this discussion. I've been placing an .rtl class on the body of my document on locale change. and implementing:

*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }
.rtl{
    direction: rtl; unicode-bidi: embed; 
}

Would it be the job of this framework to switch context of each element or that of the application developer? My thoughts are on the latter.

jmichaliga on 6 Oct 2017

@jacekkarczmarczyk , yes it can be.
@KaelWD Yes im agree wiht you, some people NOT need to load two files, and take look at the all possibilities of @peluprvi ( and i mentioned that in the first pdf file ).
@peluprvi yes excalty what i want to say! and you have added all possibilities thank you:

vuetify.base.css (without LTR or RTL styles)
vuetify.ltr.css (only LTR styles)
vuetify.rtl.css (only RTL styles)
vuetify-ltr-only.css (base + LTR styles)
vuetify-rtl-only.css (base + RTL styles)
vuetify.css (base + LTR + RTL styles)

@jmichaliga , for me NOW, i have RTL'ed every component inside stylus folder.
this is the folder https://github.com/vuetifyjs/vuetify/files/1359982/stylus.zip
and i have added rtl.styl that load this files and generate rtl.css and call this file in HTML.
look at this pictures! i hope it help you <3.

and you have to worry about v-navigation-drawer and add clipped-left or clipped-right
and there is some trick in vuetify.js for fixing pushing in RTL.
and generally, as I've said the end-user must have the choice, and I'm with: generate all possibilities.

NadhirBoukhenifra on 7 Oct 2017

Do not forget the scrollbar to the left, with direction: rtl; on CSS

peluprvi on 24 Oct 2017

why would you add a different folder for RTL. IMHO it will lead to confusion as to what files to load/add.

I forked vuetify and added RTL support using stylus mixins, you just need to add dir="rtl" in your html tag and rtl prop in v-app. The advantage here is that you don't need to edit 2 stylus files for the same component. A margin-left: 12px would be written in one place with the mixin bidi-style(margin-left, 12px,margin-right, auto), a text-align: left is written bidi-value(text-align, left, right) and that's it!

The resulting CSS file sizes (v 1.0.0)
original unminified: 338 kB -> with RTL unminified: 358 kB
original minified: 263 kB -> with RTL minified: 277 kB