Generating print output from DITA using CSS

36
CSS for Print Presented by: Jim Mandas and Mark Giffin

Transcript of Generating print output from DITA using CSS

Page 1: Generating print output from DITA using CSS

CSS for PrintPresented by: Jim Mandas and Mark Giffin

Page 2: Generating print output from DITA using CSS

Molina HealthcareRegulated content. No DITA experience

2

Page 3: Generating print output from DITA using CSS
Page 4: Generating print output from DITA using CSS

Content Channels

Page 5: Generating print output from DITA using CSS

Publishing Environment

Page 6: Generating print output from DITA using CSS

Molina Embraces DITA

6

Page 7: Generating print output from DITA using CSS

Content Strategy

Page 8: Generating print output from DITA using CSS

DITA Implementation

Page 9: Generating print output from DITA using CSS

What is a stylesheet language?

Page 10: Generating print output from DITA using CSS

Two options to style XML

1. Extensible Stylesheet Language Formatting Objects (XSL-FO)

2. Cascading Stylesheets (CSS)

10

Page 11: Generating print output from DITA using CSS

The Challenge

11

Page 12: Generating print output from DITA using CSS

This is me the day our consultant left

Page 13: Generating print output from DITA using CSS
Page 14: Generating print output from DITA using CSS
Page 15: Generating print output from DITA using CSS

My Challenge

Page 16: Generating print output from DITA using CSS
Page 17: Generating print output from DITA using CSS
Page 18: Generating print output from DITA using CSS

Mark Giffin

18

Page 19: Generating print output from DITA using CSS

Here lies XSL-FO?

Page 20: Generating print output from DITA using CSS

CSS Project Requirements

Page 21: Generating print output from DITA using CSS

GitHub DITA-CSS plug-in

Existing CSS-to-PDF plugin

Page 22: Generating print output from DITA using CSS

– In-house web developers unfamiliar with XML– To say nothing of DITA, class attributes etc.

Existing CSS-to-PDF plugin

Page 23: Generating print output from DITA using CSS

– Modular CSS setup with many separate files - our developers asked for a single CSS file

Existing CSS-to-PDF plugin

Page 24: Generating print output from DITA using CSS

• Single XHTML file (@chunk="to-content" on map)• CSS is applied to familiar HTML

DITA OT XHTML output

Page 25: Generating print output from DITA using CSS

• CSS PDF worked with our formatting

• Automated Section 508 accessibility compliance

• Simplicity• In-house developers were

happy!

DITA OT XHTML Output

Page 26: Generating print output from DITA using CSS

Lucky breaks

Page 27: Generating print output from DITA using CSS

Things we didn’t get with XHTML transtype

Generated chapter TOCs But they can be addedGenerated main TOC

27

Page 28: Generating print output from DITA using CSS

Will it work with our CCMS?

Page 29: Generating print output from DITA using CSS

It worked!

Page 30: Generating print output from DITA using CSS

It worked!

Page 31: Generating print output from DITA using CSS

Parts of CSS used

Page 32: Generating print output from DITA using CSS

• Uses DITA OT xhtml transtype• New OT transtype: molina.css.pdf• @chunk=“to content” on DITA map file to create a single output HTML file• Pass XHTML and CSS to Antenna House to produce the PDF• A few changes to default XHTML output have been made• Added several @outputclass attributes in DITA source• Plan to open source what we do

Details

Page 33: Generating print output from DITA using CSS

Plans

Page 34: Generating print output from DITA using CSS

CSS for Print Conclusion

Page 35: Generating print output from DITA using CSS

The Backstory

Page 36: Generating print output from DITA using CSS

Thank you [email protected]