Align text based on if page is left or right

Question

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?

Do you want to change the alignment for h1 only, or for all paragraph styles on that page? — Hobbes, Apr 03 '15 at 12:28
Compatibility seems limited, that could be the main problem.. https://developer.mozilla.org/en-US/docs/Web/CSS/:left But have you tried `margin-left:` and `margin-right:` ? Text-align will only align the text within your h1 tags and if there is no width set you're not going to notice alignment on either side as the h1 block will only be as wide as the text within it. — Hastig Zusammenstellen, Apr 03 '15 at 12:29
@Hobbes I only have one element of text on this page, so I guess either way would be fine. @HastigZusammenstellen that name is way too long to `@`message. Anyway, any solution is fine as long as I can specify some formatting dependent on whether a page is left or right. — Nate Glenn, Apr 03 '15 at 14:10

score 1 · Answer 1 · edited May 23 '17 at 10:28

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.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 07 '15 at 07:57

Hobbes

1,964
3
18
35

Thanks, but I need to be able to style individual elements. – Nate Glenn Apr 07 '15 at 08:31
Thanks. I think that there is currently no CSS answer to the more general question of styling things based on the current page being left or right, but the solution you pointed out will work with Flying Saucer or WeasyPrint (but not any browsers, yet). – Nate Glenn Apr 07 '15 at 10:27

score 0 · Answer 2 · answered Apr 03 '15 at 12:25

0

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

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

answered Apr 03 '15 at 12:25

Manwal

23,450
12
63
93

The is currently no browser that supports the @page rule. You could try a evaluation copy of PrinceXML – pwavg Jan 18 '16 at 12:48

alecov · Answer 3 · 2016-02-09T13:00:05.760

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

@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.

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.:

@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.

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

Align text based on if page is left or right

3 Answers3