@left-top {
                display: block;
                content: "This is a test";
                background: #ffc;
                writing-mode: vertical-rl;
                text-align: center;
                vertical-align: middle;
            }

just for the sake of legibility, I'll be referring to "horizontal" and "vertical" axes using the page as the frame of reference.

currently, while using "vertical-rl" writing mode, there is no mechanism to adjust the placement of the text on the horizontal axis. "text-align" has no effect, and "vertical-align" still adjusts the placement of the items on the vertical axis.

in contrast, when using "vertical-rl" as the writing mode, "vertical-align" is used to adjust the placement along the horizontal axis, and "text-align" is used to adjust the placement along the vertical axis.

I have tried all permutations of place/align/justify item/content, as well as tried forcing the margin box to display as flex, or grid (I didn't really expect that to work, but I had to try).

slightly related: support for writing-mode: sideways-rl and sideways-lr would be wonderful - though currently, I can use "vertical-rl" and just transform the entire margin box 180degrees to get the same effect, even if it is a pain to think in rotated terms on top of working with flipped axes.

oh... this is a spec issue:



well, that's a bit silly... how do they expect folks to adjust the horizontal alignment of cells in vertical writing modes if neither "text-align" and "vertical-align" does that...

Hi,

You can achieve more complex layout in the page margin boxes by taking elements from the document, which lets you apply arbitrary styling such as flex display. For example:

<style>
@page {
    @left-top { content: element(left-top) }
}
.left-top {
    display: flex;
    flex-direction: column;
    position: running(left-top);
    width: 100%;
    height: 50%;
    background: #ffc;
}
.left-top > * {
    writing-mode: vertical-rl;
    margin: auto;
}
</style>
<div class="left-top"><div>This is a test</div></div>

If you are using Prince 16 you can use grid layout, which has better support for vertical writing than our current flex implementation. For example:

<style>
@page {
    @left-top { content: element(left-top) }
}
.left-top {
    display: grid;
    align-items: center;
    justify-items: center;
    position: running(left-top);
    writing-mode: vertical-rl;
    width: 100%;
    background: #ffc;
}
</style>
<div class="left-top">This is a test</div>

Mark

Edited 21 Sep 2025 by markbrown

Copy that - thanks for the pointer, chief!