height handling of "page" and "section-content-wrapper" class for writing-mode: vertical-rl; float:right;
Minimal working example:
Create a webpage which uses the standard layout and has following content:
<div class="vertical-panel">
国際化活動 W3C。<br/>
<ruby>
<rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
<rp>(</rp><rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt><rp>)</rp>
</ruby>
<br/>
ワールド・ワイド・ウェッブを世界中に広げましょう。ワールド・ワイド・ウェッブを世界中に広げましょう。
</div>
All looks good. Notice that in the 3rd text line, "wrapping at character" for japanese text works correctly, although the space between text and right boarder could be smaller, it could be the same as between text and left border (see https://www.w3.org/International/articles/typography/linebreak for linebreak in japanese).
Now we want to apply vertical writing (see https://www.w3.org/International/articles/vertical-text/ for reference). For that, create a html block with
<style>
div.vertical-panel {
writing-mode: vertical-rl;
float:right;
}
</style>
Create a custom layout which uses the default template and which includes the above created block in the htmlhead.
Change the layout of your test webpage from standard to your custom layout. Reload your test webpage.
We see two issues now:
- The height of the "page" class is too high. It is responsive with respect to the window height of the browser, which is good. But not the whole extent of the "page" element is seen in the open browser window. Maybe reducing the actual height by the top padding value of the "page" class would be appropriate.
- The height of the "section-content-wrapper" class changes to a very small value as soon as
float:right;
is used in the css code. It should not change wetherfloat:right;
is used in the css block or not. Float right is the proper thing to do for vertical japanese writing, in which the first line of text is located "float right", and the next lines are added to the left of that.
Without float:right;
:
With float:right;
: