Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

:dir lacks wide support #256

Open
r12a opened this issue Jul 12, 2022 · 3 comments
Open

:dir lacks wide support #256

r12a opened this issue Jul 12, 2022 · 3 comments
Labels
doc:arab_ks doc:arab_ug doc:arfa gap The first comment in this issue is read by the gap-analysis document. i:bidi_text Bidirectional text l:arb Arabic l:ks Kashmiri l:pes Persian l:ug Uighur l:ur Urdu p:basic The gap-analysis priority is Basic. s:arab Arabic script (Used for arb + pes) s:aran Arabic nastaliq script style x:adlm x:alreq x:arab-ks x:arab-ug x:blink x:hebr x:nkoo

Comments

@r12a
Copy link
Contributor

r12a commented Jul 12, 2022

This issue is applicable to all languages with RTL orthographies.

Style sheets need to add special rules for RTL styles if they are not supported by logical properties or values.

One approach is to create a second style sheet which, when pulled into an HTML page, overrides styles in the main style sheet with settings for RTL text. This approach is not ideal because it requires maintaining the styles in two separate locations, which can therefore get out of synch, and it requires explicit addition of a call to the second style sheet in every page that will support RTL text.

The :dir() pseudo-class avoids these issues by allowing the content author to include the RTL variations in the same style sheet as the others. However, it is not yet supported by all major browser engines.

A workaround that precedes selectors with :root[dir=rtl] selector_here can help, but :dir() is a better way forward. There also appear to be Shadow DOM implications if this is not supported.

The Gap:

:dir is not interoperably supported by all major browser engines.

selectors-4 Describes the :dir() feature in CSS.
html5 Describes the :dir() feature in HTML.

Can I Use indicates that Gecko supports :dir(), but Blink, and Webkit do not.
This was confirmed while trying to get this to work recently.

The functionality appears to be available in Blink, but behind a flag.

This simple test below checks whether :dir() causes styling to be changed. The test currently passes for Gecko, but not for Blink or WebKit browsers.

Priority:

This pseudo-class significantly improves the process of designing style sheets that can cater for both LTR and RTL pages. It is a valuable enabler for better internationalisation of the Web for the billion or so potential users of RTL scripts. This was therefore marked as Basic.

Tests & results:

interactive test, The browser supports :dir() selectors.

Action taken:

BlinkWebkit

Outcomes

WebKit now supports this selector, as well as Gecko.

@r12a r12a added gap The first comment in this issue is read by the gap-analysis document. doc:arfa i:bidi_text Bidirectional text p:basic The gap-analysis priority is Basic. x:webkit x:blink x:alreq x:adlm x:nkoo x:hebr x:arab-ks x:arab-ug labels Jul 12, 2022
@r12a
Copy link
Contributor Author

r12a commented Jul 12, 2022

The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the document. Proposals for changes or discussion of the content can be made in comments below this point.

Relevant gap analysis documents include:
AdlamArabic/PersianHebrewKashmiriN'KoUighur

@rniwa
Copy link

rniwa commented Sep 1, 2022

See WebKit/WebKit#3907

@r12a
Copy link
Contributor Author

r12a commented Sep 1, 2022

Thanks @rniwa! That's great news. Do we know when it will become available for released versions of the browser?

I'll update our test results and this gap report once it's available to general users.

@r12a r12a removed the x:webkit label May 25, 2023
@r12a r12a added l:ks Kashmiri l:arb Arabic l:pes Persian l:ug Uighur l:ur Urdu labels Jun 5, 2024
@r12a r12a moved this to Bug fix in progress in Gap-analysis pipeline Jun 20, 2024
@r12a r12a added s:arab Arabic script (Used for arb + pes) s:aran Arabic nastaliq script style labels Jun 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
doc:arab_ks doc:arab_ug doc:arfa gap The first comment in this issue is read by the gap-analysis document. i:bidi_text Bidirectional text l:arb Arabic l:ks Kashmiri l:pes Persian l:ug Uighur l:ur Urdu p:basic The gap-analysis priority is Basic. s:arab Arabic script (Used for arb + pes) s:aran Arabic nastaliq script style x:adlm x:alreq x:arab-ks x:arab-ug x:blink x:hebr x:nkoo
Projects
Status: Bug fix in progress
Development

No branches or pull requests

2 participants