page-left-right-002-print-ref.html (657B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 600px 300px; 6 margin: 0; 7 } 8 :root { 9 print-color-adjust: exact; 10 direction: rtl; 11 } 12 body { 13 margin: 0; 14 } 15 div { 16 break-after: page; 17 width: 100px; 18 height: 100px; 19 overflow: clip; /* Depending on font, glyphs may overflow. */ 20 background: yellow; 21 } 22 div:nth-child(odd) { 23 margin-right: 500px; 24 } 25 div:nth-child(even) { 26 margin-top: 200px; 27 } 28 </style> 29 <div> 30 top left corner 31 </div> 32 <div> 33 bottom right corner 34 </div> 35 <div> 36 top left corner 37 </div> 38 <div> 39 bottom right corner 40 </div>