- From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
- Date: Mon, 07 Jan 2019 01:15:45 +0000
- To: public-css-archive@w3.org
Interesting. I would have expected this to be possible by using Unicode [zero-width joiner characters](https://en.wikipedia.org/wiki/Zero-width_joiner) (aka, `‍` entity) between the letters and the letters-as-image. The ZWJ is supposed to be treated as a "word" character and therefore it should trigger the connected versions of the glyph before/after it. As I understand, this is a common structure in many Indic scripts. But I couldn't find any existing examples of using it for Arabic. I found that this approach worked in Chrome, but only if there was markup on the other side of the joiner. The ZWJ couldn't trigger a medial form between the Arabic letter and another Unicode character, such as an emoji. In other browsers, the ZWJ didn't have any effect. Although on the plus side, Firefox and Edge do use medial forms even when letters are separated by markup. Samples (also available as a [CodePen](https://codepen.io/AmeliaBR/pen/2bf3158b62a16f9a946081e979b74bdb?editors=1100)): - All letters: أجي - Letters broken by span:أ<span>ج</span>ي - Emoji replacement:<bdo dir="rtl">أ💗ي</bdo> - Emoji wrapped in span: <bdo dir="rtl">أ<span role="img" aria-label="ج">💗</span>ي</bdo> - Image replacement: <bdo dir="rtl">أ<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/heart.svg" alt="ج" />ي</bdo> - Emoji wrapped in ZWJ characters: <bdo dir="rtl">أ‍💗‍ي</bdo> - Emoji wrapped in ZWJ characters + span: <bdo dir="rtl">أ‍<span role="img" aria-label="ج">💗</span>‍ي</bdo> - Image wrapped in ZWJ characters: <bdo dir="rtl">أ‍<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/heart.svg" alt="ج" />‍ي</bdo> Unicode does have designated characters for each Arabic glyph form, so you could use those to force the desired rendering. But that does seem sub-optimal. If you want to pursue the use of ZWJ for forcing Arabic connected forms, the correct forum would be Unicode + browser bug trackers. For handling the issue in CSS: Are you thinking of a property that could be set on an element (e.g., a `<span>` or an `<img>`) to indicate that the element should be treated as "word" characters and therefore trigger joining forms on either side? Would you want joining to be the default behavior? -- GitHub Notification of comment by AmeliaBR Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3487#issuecomment-451794629 using your GitHub account
Received on Monday, 7 January 2019 01:15:47 UTC