What does it take to create standard CSS for a wide range of textbooks that convinces editorial stakeholders to buy in, establishes a standard schema, validates for consistent structure, handles complex layouts and intricate math and chemical equations, and adheres to extensive EPUB and accessibility guidelines?
Betsy Granger, Executive Strategist - Content Standards at Macmillan Learning, will share the struggles and successes of their year-long journey. Learn about their approach to treating CSS as if it were software, grounding their design in research, and the four key principles they developed to guide their work.
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Universal CSS - Betsy Granger - ebookcraft 2018
1. Universal CSS
How to maintain flexibility and title-specific branding,
while secretly taking away the freedom of design
macmillanlearning.com
2. 2
CSS
Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in a markup language.
EPUB
EPUB is an e-book file format with the extension .epub that can be
downloaded and read on devices like smartphones, tablets, computers, or
e-readers. It is a technical standard published by the International Digital
Publishing Forum (IDPF). The term is short for electronic publication and is
sometimes styled EPUB.
html
Hypertext Markup Language, a standardized system for tagging text files
to achieve font, color, graphic, and hyperlink effects on World Wide Web
pages.
Glossary
schema
Specifies how to formally describe the elements in a document. It can be used
by programmers to verify each piece of item content in a document.
Schematron
a rule-based validation language for making assertions about the presence or
absence of patterns in XML trees.
SCSS
(for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every
valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “.sass”).
xhtml
Extensible Hypertext Markup Language (XHTML) is part of the family of XML
markup languages. It mirrors or extends versions of the widely used Hypertext
Markup Language (HTML), the language in which Web pages are formulated.
4. 1The Quest
A year long project to create a standard CSS for
textbooks across all the disciplines that Macmillan
Learning supports.
macmillanlearning.com
6. The problems
6
● Cost and time of producing title specific CSS
● Pedagogical elements designed for print not
translating to EPUB
● Reading order unclear in source file
● Correcting common issues in every CSS
7. Reasons to
standardize
7
● Reduce costs
● Reduce time to market
● Future-proof content for upcoming changes in platform
● All EPUBs need to be accessible, interoperable, and
responsive
9. Pathway to Universal CSS
Macmillan Learning
shifted to EPUBs
from pdfs
9
2016 Oct
2016
Jan
2017
Mar
2017
May
2017
Universal CSS project
kicks off
Kick off meeting with
Editorial
Elements mapped,
design process starts
Stakeholders conduct
EPUB reviews of first
Macmillan EPUBs in
terms on CSS
10. EPUB Reviews
1010
We opened EPUB xhtml
pages in chrome browser
and used Google chrome
developer tools to show
problems with coding and
CSS
15. Editorial
response
phases
1515
● Resistance
“It will not work with my content, it is special”
(March 2017)
● Resignation
“Fine, I get why we should do this but I don’t like it”
(October 2017)
● Acceptance
“Pleasantly surprised”
(February 2018)
16. Designs
1616
- Designs allude to print with color
- Designs signal semantic markup
- Elements can use multiple
classes to enable flexible design
18. SASS
1818
For basic guide see:
https://sass-lang.com/guide
Benefits of SASS:
● Maintain CSS with smaller element
based modules vs. single style sheet
● Use of variables
● Use of extenders
19. Created EPUB
sample with Schema
+ CSS
MAPPING
MAPPING
MAPPING
Pathway to schema
Introduced to the
Idea of
schema/Schematron
19
Jun
2017
Sept
2017
Fall
2017
Jan
2018
Mar
2018
Macmillan Schema
1.0 Authored
Schema + CSS in live
titles
Training Comp on
Schema + CSS
Review and approve
incomings designs
for elements
Author SCSS
modules
SCHEMACSS
20. Schematron Validation
20
● Keeps compositors on schema pallette
● Faults use of decided elements (<pre>, <script>)
● Deeper rule based validation on content
● Produce more consistent epubs
22. If I could turn
back time
2222
● Utilized design vendors more familiar with EPUB profile
● Not named it “Universal CSS”
● Used live content in samples we gave to editorial
● Pushed compositor to start using and/or learning schema
earlier in production process
● Graduated more standards in smaller pushes to live titles