Named pages

This example renders two pages in A5 using so called "named pages". The first named page is "Portait", the second one is "Landscape". Named pages allow you to render a particular content element on a different page with deviant @settings (size, orientation, page boxes).

  • Page 1: text on A5 (portrait)
  • Page 2: text on A5 (landscape)
  • Page 3: text on A4 (landscape, blue background, custom header and footer, custom colors)

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  ERROR
improper orientation on page #2, empty page #4
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="styles.css" />
  4. </head>
  5. <body>
  6.  
  7. <div id="portait">
  8. <h1>A5 portrait mode</h1>
  9. <p>
  10. Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
  11. turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
  12. sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
  13. penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
  14. lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
  15. placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
  16. integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
  17. rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
  18. egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
  19. phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
  20. pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
  21. augue.
  22. </p>
  23. <p>
  24. Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
  25. turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
  26. sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
  27. penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
  28. lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
  29. placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
  30. integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
  31. rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
  32. egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
  33. phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
  34. pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
  35. augue.
  36. </p>
  37. </div>
  38. <div id="landscape">
  39. <h1>A5 landscape mode</h1>
  40. <p>
  41. Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
  42. turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
  43. sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
  44. penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
  45. lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
  46. placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
  47. integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
  48. rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
  49. egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
  50. phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
  51. pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
  52. augue.
  53. </p>
  54. <p>
  55. Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
  56. turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
  57. sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
  58. penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
  59. lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
  60. placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
  61. integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
  62. rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
  63. egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
  64. phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
  65. pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
  66. augue.
  67. </p>
  68. </div>
  69.  
  70. <div id="bizarre">
  71. <h1>A6 landscape mode, blue background, custom header and footer</h1>
  72. <p>
  73. Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
  74. turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
  75. sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
  76. penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
  77. lorem, facilisis dignissim tempor auctor ut sociis pulvinar.
  78. </p>
  79.  
  80. </div>
  81. </body>
  82. </html>

Stylesheet

  1. @import url("../styles/a5.css");
  2.  
  3. h1 {
  4. font-size: 1.6em;
  5. color: orange;
  6. }
  7.  
  8. @page Portrait {
  9. size: A5;
  10. }
  11.  
  12. @page Landscape {
  13. size: A5 landscape;
  14. }
  15.  
  16. @page Bizarre {
  17. size: 148mm 105mm;
  18. background: blue;
  19. color: pink;
  20. border: 3px dashed yellow;
  21. margin: 1.5cm;
  22.  
  23. @top-center {
  24. content: "This is so bizarre";
  25. color: red;
  26. }
  27. @bottom-center {
  28. content: "This is so bizarre";
  29. color: red;
  30. }
  31. }
  32.  
  33. #portait {
  34. page: Portrait;
  35. }
  36.  
  37. #landscape {
  38. page: Landscape;
  39. }
  40.  
  41. #bizarre {
  42. page: Bizarre;
  43. }