Inclusive Design Guides for duplexed card output

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

Content 1

Card 2

 Content 2

Print format

Front

Content 1 - front

Content 2 - front

Back

Content 2 - back

Content 1 - 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
Category: Category 1
---

Topic 1 content goes here...

###cardBreakToken

Rest of topic 1 content goes here...

topic2.html.md

---

Title: Topic 2
Category: Category 1
---

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.

topic1-front.html.md

---

Title: Topic 1 - Front
Category: Category 1
Next page: Topic 1 - Back
Previous page:
---

Topic 1 content goes here...

topic1-back.html.md

---

Title: Topic 1 - Back
Category: Category 1
Next page:
Previous page: Topic 1 - Front
---

Rest of topic 1 content goes here...

topic2-front.html.md

---

Title: Topic 2 - Front
Category: Category 1
Next page: Topic 2 - Back
Previous page:
---

Topic 2 content goes here...

topic2-back.html.md

---

Title: Topic 2 - Back
Category: Category 1
Next page:
Previous page: Topic 2 - Front
---

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 size attribute.

      • but size CSS 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.