electron
fix display of parentheses for right-to-left languages
This is a followup to https://github.com/electron/electronjs.org/pull/1254
A few things are still quirky on RTL pages, like parentheses. Here's an example from the Arabic /releases page:
Possible ways to solve this:
- https://stackoverflow.com/questions/5741522/brackets-displays-wrongly-for-right-to-left-display-style
-
‏tag - http://rtlcss.com
- https://www.npmjs.com/package/flipcss
Recommendation: add dir="auto" to surrounding section elements, like <section class="page-section" dir="auto">. I think the browser should automatically detect the language of the content of an element with dir="auto" based on the characters used, then select an appropriate direction on a per-section basis. Sections that are still in English will be left-to-right, and fully translated sections in Arabic would be right-to-left.
Bidirectional text in HTML: https://www.w3.org/International/articles/inline-bidi-markup/index Bidirectional text in Unicode: https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
I'll try this out and let y'all know how I go.
So I was playing with setting dir="auto" on section elements, and it's not gonna be enough in situations where there's only a partial translation. If one parens is surrounded by the same language on either side, but the other parens is surrounded by two different languages on either side, not even dir="auto" can fix it 'cause neutral characters resolve their directionality according to the surrounding text. Any punctuation that acts as a border for a language transition is gonna be a problem.
Two options for mixed-language text where a parens is bordered by different languages:
-
Explicitly tag directionality.
<div dir="rtl">parenthetical text)RTL text)</div> -
Use a nonprinting character.
<div>parenthetical text)RTL text)‏</div>
The latter might be advantageous 'cause it might be more markdown-friendly i.e. translators can include it themselves as needed.
(Technically there's a third option: not to be fussed by mixed-language text.)
@snidelyhazel thanks again for digging into this. Can you open a pull request that makes some of these exploratory changes? That will make it easy for folks to preview the effects of the change.