Book UI and Responsive Styling
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The User Interface (UI) of the SICP-Rust project is designed to provide a modern, accessible, and responsive reading experience for the digital version of "Structure and Interpretation of Computer Programs." The system utilizes HTML5 and EPUB3 standards to support diverse viewing environments, from high-resolution desktop monitors to pocket devices and tablets.
The styling architecture focuses on high-quality typography, mathematical rendering via MathML/MathJax, and sophisticated syntax highlighting for code examples. It employs CSS3 media queries to adapt font sizes and layout margins dynamically based on the viewer's screen width.
Sources: README.md:9-12, html/css/style.css:1-5
Core Styling Architecture
The visual presentation is governed by a centralized CSS structure that imports specialized font configurations and defines global layout rules.
Typography and Layout
The primary font used for text is "Linux Libertine O," a serif typeface, while headings utilize "Linux Biolinum O." The layout is centered using a section element with a width optimized for readability (67ex).
| Element | Property | Value |
|---|---|---|
html | Font Family | "Linux Libertine O", serif |
html | Line Height | 130% |
section | Width | 67ex |
section | Max Width | 88% |
h1-h5 | Font Family | "Linux Biolinum O", sans-serif |
Sources: html/css/style.css:57-73, html/css/style.css:91-95
Responsive Design
The project implements a "rudimentary scaffolding" for responsive design using CSS media queries. This ensures that typography remains legible on smaller screens by scaling the base font size and adjusting blockquote margins.
The diagram shows the cascading font size adjustments based on screen width breakpoints defined in the CSS.
Sources: html/css/style.css:73-90, README.md:12-13
Technical Components and Modules
Syntax Highlighting System
Code blocks are processed using a customized version of Google Code Prettify. The system recognizes various languages, with a specific focus on Lisp and Rust. For server-side processing, the project uses a Node.js script to inject highlighting into HTML files before distribution.
- Key Scripts:
prettify.js(Lexing engine),batch-prettify-node.js(Automation). - Token Styles: CSS classes like
.str(strings),.kwd(keywords),.com(comments), and.typ(types).
Sources: js/highlight/prettify.js:132-168, batch-prettify-node.js:14-25
Mathematical Rendering
The project converts LaTeX mathematical strings into MathML using MathJax v3. This process is handled by a build script that extracts LaTeX enclosed in \( \) or \[ \] delimiters and generates a JSON database of MathML equivalents.
This flow illustrates the automated pipeline for transforming standard LaTeX math into web-ready MathML.
Sources: get-math.js:20-50, README.md:11-12
EPUB and Metadata Generation
For EPUB3 compatibility, a Ruby script (create_metafiles.rb) generates the necessary navigation and metadata files. It maps assets like CSS and fonts to the manifest and creates the Table of Contents.
| File Type | ID in Manifest | Media Type |
|---|---|---|
| Main CSS | css-style | text/css |
| Prettify CSS | css-prettify | text/css |
| Web Fonts | css-fonts | text/css |
| Cover SVG | cover-svg | image/svg+xml |
Sources: create_metafiles.rb:58-65
UI Customizations and Formatting
Specific visual elements are customized to enhance the "book-like" feel:
- Drop Caps: The first letter of the first paragraph after an
h2is floated and enlarged to3rem. - Chapter Numbers: Styled with the
.chapnumclass, appearing in a large, light-blue font (6.7em). - Footnote Popups: Implemented with box shadows and high z-index for overlay visibility.
Sources: html/css/style.css:127-133, html/css/style.css:262-277, html/css/style.css:212-220
Conclusion
The Book UI and Responsive Styling system combines traditional typographic principles with modern web technologies. By leveraging automated scripts for syntax highlighting and mathematical conversion, the project maintains a consistent high-quality presentation across multiple formats (HTML5 and EPUB3) while remaining accessible on diverse hardware.
Sources: README.md:9-15, html/css/style.css:57-90