One of the issues we had to be careful of when implementing RTL/BiDi with CSS was that html[dir="rtl"] .foo has greater specificity than .foo, so there could be unexpected fallout from this translation. The best-practices doc [1] suggests always balancing the rules for this reason, i.e. use html[dir="ltr"] for the LTR version of the rule as well. Note, that doesn't make the specificity problem go away entirely, as another .foo rule will now be overriden by this rule. But at least these problems will now be evident in the LTR mode. In practice we saw only a couple of places that needed further correction to address this. For an automatic translation, perhaps its enough to document this potential gotcha?
1) https://wiki.mozilla.org/Gaia/CSS_Guidelines#Direction_.28RTL.2FLTR_and_Bidi.29 On Thu, Nov 19, 2015 at 6:34 PM, Fred Lin <[email protected]> wrote: > Hi, > > With recent FxOS release, we use several new CSS syntax to deal with > left/right(LTR/RTL) issues. I feel it might be useful for general web > developers. > > So I write a postcss (like Babel for CSS) plugin to translate these syntax > into current physical directions (left/right) properties and values in > build time. > > For example, input syntax: > > .foo { > text-align: start; > } > > will be compiled to > > .foo { > text-align: left; > } > html[dir="rtl"] .foo { > text-align: right; > } > > It enable web developer to use these syntax now. > > And if we do the similar thing for other moz-only CSS syntax, we are able > to publish a 'preview' version of FxOS Building Block/Components CSS styles > for web developers. > > > [1] > https://gniithub.com/mozilla-b2g/gaia/blob/master/apps/settings/style/settings.css > [2] https://github.com/gasolin/postcss-bidirection > > -- > Fred > > _______________________________________________ > dev-fxos mailing list > [email protected] > https://lists.mozilla.org/listinfo/dev-fxos > >
_______________________________________________ dev-fxos mailing list [email protected] https://lists.mozilla.org/listinfo/dev-fxos
