Styling based on language
Style for one language
Sometimes, we need to make design changes specific to only one language.
<html dir="ltr" lang="fr" data-template="group-offer-detail">The html tag has the attribute lang, that you can use to make some style specific for one language.
/* Example 1 */
html[lang="fr"] .btn {
padding-left: 1em;
}
/* Example 2 (SCSS syntax) */
.btn {
padding-left: 2.5em;
html[lang="fr"] & {
padding-left: 1em;
}
}RTL languages
<html dir="rtl" lang="ar" data-template="group-offer-detail">The html tag has the attribute dir, that can be dir="ltr" or dir="rtl" .
Based on this, you can adapt the style.
For example, you may want to change the position of the padding based on LTR or RTL
/* Example to change the position of the padding (SCSS syntax) */
.btn {
padding-left: 2.5em;
html[dir="rtl"] & {
padding-right: 2.5em;
padding-left: 0;
}
}To make SASS more maintainable, to may want to use this sass mixin
/* original one with stylus https://davidwalsh.name/stylus-parent-selectors */
/* mixin definition ; sets LTR and RTL within the same style call */
/* example: bidi-style(margin-left, 20px, margin-right, 0);*/
@mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
#{$prop}: $value;
html[dir=rtl] & {
#{$inverse-prop}: $value;
#{$prop}: $default-value;
}
}
On RTL languages, numbers are wrong displayed. For example, +974 44563333 will be rendering like 44563333 974+. To avoid this issue, you can use unicode-bidi: bidi-override` property to numbers containers.
.bidi-number {
unicode-bidi: bidi-override;
}
<span class="bidi-numbers">+974 44563333</span>Last updated