CSS Writing-modes sideways values not implemented #11
Labels
doc:ca
doc:cyrl
Cyrillic
doc:de
doc:fr
doc:geor
doc:grek
doc:hu
doc:latn
Latin script
doc:nl
gap
i:vertical_text
Vertical text
l:az-cyrl
Azeri with Cyrillic script
l:bg
Bulgarian
l:ca
Catalan
l:de
German
l:el
Greek
l:fr
French
l:hu
Hungarian
l:ka
Georgian
l:nl
Dutch
l:no
Norwegian
l:ru
Russian
l:sr
Serbian
l:uk
Ukrainian
l:uz
Uzbek
p:advanced
s:cyrl
Cyrillic script
s:geor
Georgian (script)
s:grek
Greek (script)
s:latn
Latin (script)
x:adlm
x:alreq
x:blink
x:cans-iu-cr
x:cher
x:geor
x:grek
x:latn-ca
x:latn-de
x:latn-fr
x:latn-hu
x:latn-nl
x:nkoo
x:osge-osa
x:webkit
This issue is applicable to most languages.
Text that is normally written horizontally may need to be written vertically for special effects (the spine of a book, table column headings, etc). Typographically, it is simply horizontal text that is rotated.
The GAP
The CSS feature defined in Writing Modes Level 4, which is in CR, provides a solution using
sideways-lr|sideways-rl
values of thewriting-mode
property.There is no way to do this effectively until browsers support the new CSS properties.
writing-mode:vertical-lr/rl is not appropriate for achieving this, because of things such as wrong locations for line start and end, and incorrect direction of line wrapping, not to mention the implications for glyph rotation.
Only Gecko supports these values. Blink and WebKit do not.
Priority
Support is needed sooner rather than later, since many people keep writing tutorials or explainers that show how to do this using the currently supported writing-modes values. However, the currently supported values only work properly for CJK languages, and produce incorrect results for normally horizontal scripts unless used in the simplest way possible (for example, line breaking and text alignment break things).
The sideways values were moved from CSS Writing Modes 3 to level 4 because implementation support was there for the values needed for CJK. However, CSS Writing Modes 4 went to CR almost immediately with the expectation that support for the sideways features would follow soon.
Tests & results
interactive test, sideways-rl is supported in browsers
interactive test, sideways-lr is supported in browsers
Action taken
Chromium • WebKit
Outcomes
tbd
The text was updated successfully, but these errors were encountered: