This content originally appeared on DEV Community and was authored by Stas Melnikov
When our website becomes popular there is the important issue of translating on different languages. For example, I often wanted to translate the website from English to Arabic. The problem is following, English is a matter of languages where the beginning of the line is on the left (LTR) and in Arabic the beginning of the line is on the right (RTL).
So if I use the text-align: left for Arabic users they will be confused because the beginning of the line will be by the left and no right like he thought. It happens because the left and right values don't consider text direction, i.e when we use the left or right value a text is aligned to the left or right edge always.
But we can fix it using the start and end values that consider the text direction. If a browser of our user is setting in LTR language the beginning of the line will be by left. And if it's setting in RTL language then by right.
don't do this
.example {
text-align: left;
}
/* or */
.example {
text-align: right;
}
you can use this instead
.example {
text-align: start;
}
/* or */
.example {
text-align: end;
}
P.S.
? I'm always open to any opportunities to share knowledge about CSS and HTML with you. If you need help feel free to reach out to me: melnik909@ya.ru
Get awesome goods for frontenders: ? T-Shirt, ? Stickers, ? Masks, ? Magnets
P.S.S. This post was written with the support of my sponsors: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.
This content originally appeared on DEV Community and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2021-07-27T17:59:29+00:00) left/right vs start/end values. What’s better for supporting of LTR and RTL languages. Retrieved from https://www.scien.cx/2021/07/27/left-right-vs-start-end-values-whats-better-for-supporting-of-ltr-and-rtl-languages/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.