[css-page] Default placement (text-align and vertical-align) of @page margins not useful in vertical writing modes

[mstensho]

https://drafts.csswg.org/css-page-3/#margin-text-alignment has a table for a default UA stylesheet for @page margin boxes.

E.g. @top-left has text-align: left and vertical-align: middle, whereas its neighbor @top-center has text-align: center instead.

I suppose the defaults aren't that versatile in the first place, but it does make some sense, at least.

For instance:

  @page {
    size: 400px;
    margin: 100px;
    @top-left-corner { margin:3px; border:solid; content: "tlc"; }
    @top-left { margin:3px; border:solid; content: "tl"; }
    @top-center { margin:3px; border:solid; content: "tc"; }
    @top-right { margin:3px; border:solid; content: "tr"; }
    @top-right-corner { margin:3px; border:solid;  content: "trc"; }
    @right-top { margin:3px; border:solid; content: "rt"; }
    @right-middle { margin:3px; border:solid; content: "rm"; }
    @right-bottom { margin:3px; border:solid; content: "rb"; }
    @bottom-right-corner { margin:3px; border:solid;  content: "brc"; }
    @bottom-right { margin:3px; border:solid; content: "br"; }
    @bottom-center { margin:3px; border:solid; content: "bc"; }
    @bottom-left { margin:3px; border:solid; content: "bl"; }
    @bottom-left-corner { margin:3px; border:solid; content: "blc"; }
    @left-bottom { margin:3px; border:solid; content: "lb"; }
    @left-middle { margin:3px; border:solid; content: "lm"; }
    @left-top { margin:3px; border:solid; content: "lt"; }
  }
  body {
    background: #ddd;
  }

Although one could say that centering is somewhat dubious, given that most printers have some unprintable area near the paper edges, due to paper handling mechanisms, so that it might be better to push the margin boxes towards the page area, for vertical writing mode it gets really strange. If we add this:

  html {
    writing-mode: vertical-rl;
  }

Since text-align and vertical-align are logical properties (in spite of the latter having "vertical" in its name), it suddenly doesn't make any sense at all, and there's a huge risk of losing content due to unprintable areas.

[fantasai]

@mstensho This is a good point, but I'm not sure there's a good solution to it. That said the headers and footers in vertical documents are most commonly horizontal, so maybe the thing to do is to default the margin boxes to writing-mode: horizontal-tb. If an author changes the writing mode on a margin box, then they can adjust the alignment also.

[fantasai]

Proposal: Specify @page { writing-mode: horizontal-tb; } in the default UA style sheet, to block inheritance from the root element.

CC @MurakamiShinyu