5 Styles
5.1 Synopsis
The goal is to create a facsimile of the AR6 reports using HTML and CSS / CSS paged media.
5.2 Document styles
To recreate the design of the PDFs, the structural elements in the PDF are first examined and listed.
5.2.1 Assess document header structure
- PDF templates: After a superficial examination of the syntactic logic of the PDFs, 5 levels of headings were found.
- HTML sources:
<h1>to<h5>
5.2.2 Assess document design elements
Inventory of which elements can be detected by leafing through the 7 reports:
Page layout and specs
- Page dimensions: Pages of the report PDFs are approx. 8,5 inches x 11 inches.
- Margins: tbc
- Fonts: There are many font family used in the PDF, some free, some proprietary.
Colours
- Chapter colours
- Sub-chapter colours
- Font colours
- Background colours
Table of contents
- Toc styles
Page decoration
- Page header (with section title)
- Page sides (with section title)
- Page footer (with page numbers)
Headers
- h1 - h5 (possibly h6)
Text styles
- Paragraph (1 column, 2 columns)
- Statement paragraph (1 column, 2 columns)
- Highlighted statement paragraph
- Technical summary statement paragraph
- Technical Summary Section Summary
- References
- Confidence level reference
- Chapter references
- Footnotes
Box styles
- Box (grey, yellow, blue)
- 50%-Box
Annex styles
- Glossary term and description
- Glossary sub-term
- Acronyms
- Publications
- People
- Index entries
Figures and tables
- Figure
- Table
- Figcaption
Section openers
- Title
- Authors
- Citation suggestion
5.3 Build design pattern
To create a facsimile of the report PDFs, a style guide is created with all the necessary HTML and CSS styles and elements. This style guide can then be applied to the HTML of the reports later.
To benefit from the full functionality of the CSS Paged Media module, the Vivliostyle Viewer is used. https://vivliostyle.org/
5.3.1 Design pattern HTML and CSS
Design pattern, work in progress: https://github.com/TIBHannover/climate-knowledge-graph/blob/main/design_pattern/index.html
View design pattern in Vivliostyle Viewer: https://vivliostyle.org/viewer/#src=https://github.com/TIBHannover/climate-knowledge-graph/blob/main/design_pattern/index.html
5.3.2 Document CSS and CSS paged media
Document the parts of CSS and the CSS paged media module that are used and check their availability in Vivliostyle: https://docs.google.com/spreadsheets/d/1qWmnNQ-syLw8VotTaRIvVspAffnLLKMjItt3a_z1iNE/edit?gid=0#gid=0
5.4 Apply design pattern to scraped HTML
Repository for scraped HTML: https://github.com/petermr/amilib/tree/main/test/resources/ipcc/cleaned_content
Tests with applying the style guide to the HTML: tba