CSS Writing-modes sideways values not implemented · Issue #11 · w3c/eurlreq · GitHub
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

CSS Writing-modes sideways values not implemented #11

Open
r12a opened this issue Jan 30, 2020 · 6 comments
Open

CSS Writing-modes sideways values not implemented #11

r12a opened this issue Jan 30, 2020 · 6 comments

Comments

@r12a
Copy link
Contributor

r12a commented Jan 30, 2020

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 the writing-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

ChromiumWebKit

Outcomes

tbd

@r12a
Copy link
Contributor Author

r12a commented Jan 30, 2020

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/PersianCanadian SyllabicsCherokeeGeorgianGreekGermanFrenchHungarianN'KoOsage

@r12a r12a changed the title [nl] Vertical text in spines, etc. Vertical text in spines, etc. Jan 30, 2020
@fantasai
Copy link

fantasai commented Jun 22, 2020

sideways-rl/lr is supported in Firefox and has been for awhile.

@xfq
Copy link
Member

xfq commented Jun 23, 2020

Here's a test. See also the parser test in WPT. Gecko supports it, but Blink and WebKit do not.

Browser bugs raised: Chromium WebKit

@r12a
Copy link
Contributor Author

r12a commented Jun 23, 2020

I added another test for -lr and created GH issues for both with results, and pointed to from https://w3c.github.io/i18n-tests/results/int-vertical-text#nl_sideways.

Then i tidied up the entry for this topic (see above) and republished the latin-nl doc at https://www.w3.org/TR/2020/WD-latn-nl-gap-20200623/#vertical_text

@tjol
Copy link

tjol commented Jul 23, 2021

Very rarely, vertical text may use upright letters, possibly only ever in block capitals. This may be done on signs (photo on Wikipedia).

In this case, Dutch IJ should be treated as one letter.

test (Firefox and Chrome fail)

@r12a r12a changed the title Vertical text in spines, etc. CSS Writing-modes sideways values not implemented Aug 4, 2021
@r12a
Copy link
Contributor Author

r12a commented Aug 10, 2021

@tjol related: #6

@r12a r12a moved this to Browser bug raised in Gap-analysis pipeline Jun 20, 2024
@r12a r12a added l:el Greek l:fr French l:de German l:hu Hungarian l:ka Georgian l:nl Dutch l:ca Catalan s:latn Latin (script) s:grek Greek (script) s:geor Georgian (script) l:no Norwegian doc:latn Latin script labels Jun 27, 2024
@r12a r12a added s:cyrl Cyrillic script l:ru Russian l:uk Ukrainian l:uz Uzbek l:bg Bulgarian l:sr Serbian doc:cyrl Cyrillic l:az-cyrl Azeri with Cyrillic script labels Jul 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Browser bug raised
Development

No branches or pull requests

4 participants