I’m taking the liberty to cc @frivoal since we’re in contact for the project I’m currently leading.
To sum things up, we have quite some issue in EPUB-land: forcing the column axis for pagination when the writing-mode
is vertical. It would indeed be kind of weird if “pages” (achieved through the use of CSS3 multicol) were laid out on top of each other (spread view).
In other words, the following is not really the result we’re trying to get.
That is probably what is expected by authors when using columns in their stylesheet but I’m really not so sure about that by the way. After reading a lot of articles on vertical writing, it seems some authors might resolve to horizontal writing because pseudo-pagination with vertical scroll feels super unnatural, apparently. See for example “7. Stick with horizontal” in this article.
The result we’d like to get is this one:
Unfortunately, there’s no way to force the column axis. Or so I thought…
It turns out there’s a proprietary way to do it. So for the sake of compatibility – and I hope level 2 –, I’ll try to document two webkit-specific properties:
-webkit-column-axis
;
-webkit-column-progression
.
A little bit of history
Those properties first appeared in Safari 7.0, it seems to facilitate the creation of a setPagination API – Apple having interests in the ebook market, it’s not so surprising they wanted to extend columns a little bit to deal with this problem.
I took a quick look at all the CSS3 multicol drafts and didn’t find anything related to axis and progression, which is why “extend columns a little bit” in the previous paragraph. I may be wrong about that so please feel free to correct me if that is the case.
Three years ago, Chromium removed them because they had no use for it. It is however unclear if they tried to collect feedback from authors. Also, the following:
and it's assumed that these properties serve no purpose on their own. (source)
is debatable. More on that later.
What’s their purpose?
Those properties were created to:
- Allow column progression to be independent of writing mode (
axis
);
- Allow column progression direction to be set independently of writing direction (
progression
).
When using columns with vertical writing, you’ll get something like this.
To clarify, overflow on the y-axis as columns are laid out on top of one another.
But when using -webkit-column-axis
, this will have some significant effect in Safari.
You now have overflow on the x-axis as columns are laid out next to one another.
Then -webkit-column-progression
can be reversed so that, for instance, bottom to top vertical text can be managed “naturally”: first column at the bottom, last column at the top.
How those properties work
-webkit-column-axis
Values can be auto
, vertical
, or horizontal
.
-webkit-column-progression
Values can be normal
, or reversed
.
Impact on standard properties
It looks like impact on column-width
and column-count
is pretty huge. It looks like the column-width
will simply use the value of the computed width
or height
of the container, depending on the axis – for instance, if you want two vertical columns in this demo, you must change :root
’s height. As for column-count
, it is entirely ignored – as a matter of fact, you can even get rid of your columns
declaration and it will work as expected.
Consequently, if you want two visible columns with -webkit-column-axis: horizontal
, you need to constraint the width
of the container in vertical-rl
, and columns will then overflow.
Then if you also set -webkit-column-progression: reverse
, then columns will overflow in the opposite direction of the writing-mode
. So, for vertical-rl
for instance, they will overflow left to right instead of right to left.
Hope this can help as we (ebooks) have a use case for this. I really can’t tell if web authors would like to have those properties standardized but do feel like it could be worth checking with them, especially after researching Japanese typography a little bit.
After all, having such properties for columns would be consistent with flex-direction
for instance.
[Edit] Added link to horizontal mode with vertical-axis demo as impact on other properties is quite significant. It’s like switching from columns to pages, where the element’s width
or height
is overriding the columns
property.