w3c / w3c/csswg-drafts

[css-writing-modes] mixed writing modes

Open
#3,003 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

css-writing-modes-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Sorry, I am not a technical expert but I have webpages that implement mixed writing modes, namely vertical texts (both Japanese and Mongolian) within horizontal layout (i.e., English).

E.g.
http://www.cjvlang.com/mongol/3-25.html
http://www.cjvlang.com/parsesnips/ishigamiletterseng.html

Currently, extended vertical text overflows the borders of the browser window. For Mongolian it overflows the right side of the browser window (see first example page). For Japanese it would overflow the left side of the browser (not exemplified in second example page, which uses only short snippets of text, with the box centred on the page).

This is problematic behaviour, especially for Japanese. First, it is extremely unorthodox to force users to scroll to the left to see the entire content. Secondly, Google penalises this kind of behaviour in its results as "not mobile user friendly".

Ideally, text in a vertical orientation would automatically wrap to a new row when it hit the edge of the browser window. This would need to be responsive behaviour, that is, rows would have to be narrow in smartphones and wide in computers.

I am technically very unsavvy, but I note that the spec (CSS Writing Modes Level 3
W3C Candidate Recommendation, 24 May 2018) appears to recommend columns to control this kind of behaviour.

"With regards to fragmentation, the rules in CSS2.1 still hold in vertical writing modes and orthogonal flows: break opportunities do not occur inside line boxes, only between them. UAs that support [CSS3COL] may break in the (potentially zero-width) gap between columns, however."

I have been unable to use columns to attain the desired result, but that is (as I said) a result of my lack of technical sophistication. Nevertheless, since I appear to be one of the few people on the Internet who appear to be trying to embed vertical texts in horizontal pages, I feel that my experience as a user should be taken into account. This is a real-world issue. I would very much like to see attention given to the issue as it has a major impact on 1. the ability to create web pages embedding vertical texts wider than the browser window and 2. the usability of such pages.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the mixed vertical-and-horizontal writing-mode examples linked in the issue, including the Mongolian and Japanese pages, and read the referenced CSS Writing Modes Level 3 fragmentation guidance. Determine whether responsive wrapping at the viewport edge is specified or requires a new proposal; done means an agreed standards direction and interoperable behavior for these cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.