search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.44k stars 657 forks source link

[css-writing-modes] mixed writing modes #3003

Open realBathrobe opened 6 years ago

realBathrobe commented 6 years ago

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.

Zhang-Junzhi commented 6 years ago

The virtual problem is we can't use horizontal scrolling, because it's inconvinent.

My proposal major-overflow-direction aims to resolve the issue of inconvinent horizontal scrolling. If horizontal scrolling was convinent, then the problem here wouldn't be an issue.

Zhang-Junzhi commented 6 years ago

We can use major-overflow-direction: horizontal; overflow-x: auto; in those long vertical-writing boxes.

That's done.

fantasai commented 6 years ago

Using columns for overflow is specced, just not implemented. :/

Zhang-Junzhi commented 6 years ago

Glad to hear there's spec for using columns for overflow. It's definitely something that's great to have.

But I believe, in this issue, making horizontal scrolling convinent would be another resolution desired(or even preferred) by some people. Though the OP was just talking about columns for overflow, I guess when people are raising such issues, they could be even unconscious that having horizontal scrollbars on child elements is an option(due to inconvenience of horizontal scrolling for desktop mouse devices).

One more thing to be carified: An overflowed rtl box child box(by either writing-mode: vertical-rl or direction: rtl), already has its default horizontal scrollbar position started at the right edge(not the left edge), that's the case for almost all browsers. So you don't even need to first scroll the embedded vertical Japanese to the right edge, they are initially at the right edge.

Zhang-Junzhi commented 6 years ago

For years, I am very really dying to see horizontal scrolling become natively controllable by a vertical mousewheel, really! When the feature becomes real in standards, I would feel like celebriting the day with a big cake.

Zhang-Junzhi commented 6 years ago

I just wrote a page to demostrate what I was talking about.

Please take a look at this page: https://bugzilla.mozilla.org/attachment.cgi?id=8999101

If you are using Firefox 61 or above, you can experience the autodir feature(This feature is not standard but a Firefox's private feature, but it resembles the proposed major-overflow-direction property. Turning on autodir has the same effect as applying major-overflow-direction: auto; to all the elements in the document, since it's bluntly all-or-nothing, it's a sub-optimal solution compared to the proposed major-overflow-direction, but it's enough to provide you with an rough experience of what major-overflow-direction is about).