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

I want to do something like the following:

我想做类似以下的事情：

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

but this syntax doesn't work in CSS. How do I change text alignment based on whether the page is left or right?

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

3 个解决方案

#1

If setting the alignment for all text on the page is acceptable, this should work:

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

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

If the page contains one h1 element, plus one or more other elements, you could put the h1 in the page header, see this related question.

如果页面包含一个h1元素以及一个或多个其他元素，则可以将h1放在页眉中，请参阅此相关问题。

#2

I haven't tested it by i believe you can do this:

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

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

#3

According to https://www.w3.org/TR/css3-page/#margin-property-list, the syntax:

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

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

is correct; however, as said by others, currently there is no browser support for @page, and the latest release of PrinceXML doesn't support text-align either.

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

This means that, by now, it can't be done.

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

However, PrinceXML supports margin in page margin contexts. So, if one can afford pushing text using static margins e.g.:

但是，PrinceXML支持页边距上下文中的边距。因此，如果有人能够使用静态边距推送文本，例如：

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

then this is an OK kludge.

那么这是一个好的kludge。

Edit: In fact, PrinceXML does support text-align, but not for running headers; apparently it only works with generated string-content.

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

#1