{"id":372350,"date":"2022-08-08T11:21:00","date_gmt":"2022-08-08T18:21:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=372350"},"modified":"2022-08-19T06:07:04","modified_gmt":"2022-08-19T13:07:04","slug":"left","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/left\/","title":{"rendered":":left"},"content":{"rendered":"\n

The :left<\/code> pseudo-class in CSS is used with the @page<\/code> at-rule to select all left-hand pages in a print document that contains multiple pages. That’s handy for setting margins on double-sided pages so that the pages on the “left” side have one margin and the pages on the right have another for a good book-like printed reading experience.<\/p>\n\n\n\n

@page :left { \n  margin: 1in 2in;\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
The :left<\/code> pseudo-class is defined in the CSS Paged Media Module Level 3 specification<\/a>, which is currently in Editor\u2019s Draft status. That means the :left<\/code> is still in active development and could change by the time it is fully implemented as a Candidate Recommendation.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
@page :left { }<\/code><\/pre>\n\n\n\n
According to MDN<\/a>, :left<\/code> can only set the margin<\/code>, padding<\/code>, border<\/code>, and background<\/code> of all even-numbered printed pages. But after testing, margin<\/code> is the only property that appears to have a visible effect at the time of this writing.<\/p>\n\n\n
Good to know<\/h3>\n\n\n
Let’s say we have a situation where we want to add a 1in<\/code> margin to the left of every even-numbered page. Here’s how we’d do that using the :left<\/code> pseudo-class:<\/p>\n\n\n\n
@page :left { \n  margin-left: 1in;\n}<\/code><\/pre>\n\n\n\n
Great! According to Chrome’s print preview, we have the margins we want.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
But there are a few minor notes that are good to know about what to expect when the pages are sent to the printer:<\/p>\n\n\n
Margins and writing modes<\/h4>\n\n\n
The physical margin is still added to the left-hand side of the document, which could have the effect of pushing an element off of the printable area when working with a different writing, say, vertical-rl<\/code>:<\/p>\n\n\n\n
body {\n  writing-mode: vertical-rl;\n}\n\n@page :left {\n  margin-left: 1in;\n}<\/code><\/pre>\n\n\n\n
\"\"
Ruh roh! The elements are now pushed out of the printable area when applying writing-code: vertical-rl<\/code> to the body.<\/figcaption><\/figure>\n\n\n\n
Using the logical property margin-inline-start<\/code> in place of margin-left<\/code> might be the better way to go:<\/p>\n\n\n\n
body {\n  writing-mode: vertical-rl;\n}\n\n@page :left {\n  margin-inline-start: 1in;\n}<\/code><\/pre>\n\n\n\n
\"\"
The second page now has a margin along the “top” edge of the printed document.<\/figcaption><\/figure>\n\n\n
Page order depends on page progression, which depends on the direction<\/code> and writing-mode<\/code><\/h4>\n\n\n
Browsers will differentiate between “left” and “right” pages whether a page is double-sided or not. But whether the first page is considered left or right depends. According to the spec:<\/a><\/p>\n\n\n\n
Whether the first page of a document is a left page or a right page depends on the page progression of the document. The page progression<\/dfn> is the direction in which the printed pages of a document would be sequenced when laid out side-to-side. For example, English and horizontally-set Japanese typically progress from left to right, whereas Arabic and vertically-set Japanese pages typically progress from right to left.<\/p><\/blockquote>\n\n\n\n
So, if the text is set horizontally, we can expect pages to flow in the inline direction. Otherwise, a vertical direction will flow in the block direction, which could affect page order, and ultimately, whether :left<\/code> is applied on a particular page. Therefore, the direction<\/a><\/code> and writing-mode<\/a><\/code> properties may impact the page order.<\/p>\n\n\n
Margins don\u2019t apply if the content is outside the page box<\/h4>\n\n\n
If the page content is set outside the printable area of the page box with the margin property, the page resets back to normal. This is actually one of the unknown behaviors that occur when content is placed far from the printable area or the page box. For example, using our code above, let\u2019s say we\u2019re trying to get rid of all the contents on the even-numbered<\/code> by pushing it via the margin<\/code> property and we set the margin-inline-start<\/code> to 10in<\/code>, which is one inch shy of a standard 8.5″\u00d711″ piece of paper:<\/p>\n\n\n\n
@page :left {\n  margin-inline-start: 10in;\n}<\/code><\/pre>\n\n\n\n
This is what the page would look like:<\/p>\n\n\n\n
\"\"
Yep, there’s one inch of room to spare!<\/figcaption><\/figure>\n\n\n\n
Notice how the page content is just short of being pushed completely past the page box. Now, look what happens when the margin-inline-start<\/code> is set to 11in<\/code>:<\/p>\n\n\n\n
@page :left {\n  margin-inline-start: 11in;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The browser completely ignores the margin<\/code> property as a whole. The spec doesn\u2019t define how content is positioned outside the page box, but this is how the browser would handle it. This also applies to pages in left-to-right<\/code> mode.<\/p>\n\n\n
The printer settings still matter<\/h4>\n\n\n
The :left<\/code> pseudo-class has no impact on how<\/em> a printer does its job. For example, :left<\/code> does not tell the browser to use double-sided printing on pages. That still has to be done at the printer level.<\/p>\n\n\n
Demo<\/h3>\n\n\n
In the following demo, we have created five elements to illustrate. We\u2019re forcing a page break after each one so that we get a total of five pages when sending this to the printer.<\/p>\n\n\n\n