根据页面是左还是右对齐文本

Question

我想做以下事情：

@page :left{
    h1 {text-align: left;}
}
@page :right {
    h1 {text-align: right;}
}

但是这种语法在CSS中不起作用。如何根据页面是左还是右更改文本对齐？

Answer 1

如果可以接受为页面上的所有文本设置对齐方式，则应该可以使用：

@page :left {text-align: left;}
@page :right {text-align: right;}

如果页面包含一个h1元素以及一个或多个其他元素，则可以将h1放在页眉中，请参阅this related question。

Answer 2

我还没有测试过，我相信你可以做到这一点：

@page :left h1 {text-align: left;}
@page :right h1 {text-align: right;}

Answer 3

根据https://www.w3.org/TR/css3-page/#margin-property-list，语法：

@page :left {
    h1 { text-align: left; }
}
@page :right {
    h1 { text-align: right; }
}

是正确的;但是，正如其他人所说，目前没有@page的浏览器支持，并且最新版本的PrinceXML也不支持text-align。

这意味着，到现在为止，它无法完成。

但是，PrinceXML在页边距上下文中支持margin。因此，如果可以使用静态边距推送文本，例如：

@page :left{
    h1 { margin-right: 10000em; } // We all know 10000em equals to infinity.
}
@page :right {
    h1 { margin-left: 10000em; }
}

然后这是一个好的kludge。

编辑：事实上，PrinceXML支持text-align，但不支持运行标头;显然它只适用于生成的字符串内容。