Inclusive Design Guides for duplexed card output
Goal
Enable direct-from-web printing of the Inclusive Design Guide website
Output should be like the PDF files produced before:
2 cards per page and double-sided
Example
Web view
Card 1
|
Card 2
|
Print format
Front
| Back
|
Automating Duplex Layout
The following is a rough draft of a possible automated solution:
Author writes content and manually inserts a token where they want the front and back of the card to be split.
topic1.html.md |
--- Title: Topic 1 Topic 1 content goes here... ###cardBreakToken Rest of topic 1 content goes here... |
--- Title: Topic 2 Topic 2 content goes here... ###cardBreakToken Rest of topic 2 content goes here... |
Parser goes through each raw content page (i.e. written in markdown and html) and split the page into two.
--- Title: Topic 1 - Front Topic 1 content goes here... |
topic1-back.html.md |
--- Title: Topic 1 - Back Rest of topic 1 content goes here... |
--- Title: Topic 2 - Front Topic 2 content goes here... |
--- Title: Topic 2 - Back Rest of topic 2 content goes here... |
Using a template, render two pairs of front pages side-by-side (this could be an HTML template, and two sections side by side)
Front | |
Topic 1 content goes here... | Topic 2 content goes here... |
Back | |
|
|
Find the matching back pages and put them side by side but in reverse order
Front | |
Topic 1 content goes here... | Topic 2 content goes here... |
Back | |
Rest of topic 2 content goes here... | Rest of topic 1 content goes here... |
Old Notes
Handling page breaks
Author needs to specify page breaks in the source
If doing print CSS:
Use handlebars to inject page break elements
the content author does this manually by putting a call to a handlebars function within the markdown file.
If doing direct from web printing (straight HTML output to printer), the source content needs to be 2 cards per page as well
This would mean we will need to generate content that is 2 cards per page - currently the site just displays 1 card at a time.
In order to print 2 cards per page properly duplexed, the corresponding reverse side of the:
left card appears on the right on the second page
right card appears on the left on the second page
this means that to do duplex properly, when a page break is inserted, the 2nd page should reverse the order of the back pages.
A simpler case would be to print 1 card per page, duplexed.
the output page dimensions in this case would be 5.5" x 8.5", to do this using CSS you would use the
sizeattribute.but
sizeCSS attribute is only supported by Firefox currently.
alternative approach is to fix the size of the content container
this is the current approach being used in testing.
Other remarks
A content author will not know if their content fits properly onto one side of a card until they print or print preview their content.