2021 Roundup Report

The year 2021 was characterized by starting the project from scratch. Hence initial exploration to gather an understanding of some open questions and techniques and to create a starting point, to work iteratively into was necessary. Afterward, concepts have been implemented to point in the right direction—subsequently to be refined and updated throughout the year. In the second half of the year work on the Emsquare publication has started, the appearance of this report is taken from there.

Technical Highlights from a Web Developer Perspective

CSS: The implementation leans heavily on newer CSS features, like extensive usage of custom properties, calc(), and @keyframes for interpolation of e.g. grade (GRAD) values using font-size as an input. The result is a CSS framework that provides high-level custom properties to drive lower-level typographic expressions. Some CSS is backed up or driven by JavaScript, but all that can be in CSS is in CSS. That way the role of JavaScript is more focused on controlling and less on the details of using the actual fonts. Though, using @keyframes requires an in-JavaScript fallback mechanism for all browsers that are not Blink-engine (i.e. Chrome, etc.).

Justification: To implement the justification scheme it’s necessary to identify the lines as created by the native browser text-setting engine. Then those lines are marked up so that they can be controlled using CSS. It is ensured that the semantics of the original markup isn’t changing. For example, this would happen by—at the break of a line—splitting existing inline tags, like links (<a>), into two elements. AFAIK, both, the line-finding and line-markup have never been done before like this. Unfortunately, the justification implementation is not as fast as it should be for production use in websites, but it makes a strong proof of concept.

Git History Summary

This is just a small and likely too sparse summary of the git commit history of the year.

Jan/Feb

• Initial Explorations
• Calibration Widget: Explore the state of dimensional units and calibration in the web platform

Feb/Mar

• article: Calibrate CSS
• take over Wikipedia markup and the article about Typography as a playground
• initial user controls widget
• portal testbed tool
• bookmarklet to extract type size ramps from web pages
• initial dark-mode and grade/GRAD

Mar/Apr

• initial experimental relative distance user widget
• initial runion-01: columns, line-length, gutter, padding, line-height
• implement line-finding
• first justification implementation

Apr/May

• Better grade/GRAD implementation
• superscript and subscript synthesis
• justification color coding
• maintenance and refinements
• ATypI Tech Talks, May 3–5

May/Jun

• new justification algorithm
• change justification fontSpec by the used font

Jun/Jul

• use Wikipedia API to fetch and display other articles
• justification and runion-01 improvements

Jul/Aug

• initial Emsquare setup with Jekyll
• maintenance

Aug/Sep

• CSS-Framework refinements
• Emsquare editorial work
• justification refinements; different line-handling modes; headline inter-line harmonization

Sep/Oct

• switch fonts widget
• MacOS/iOS debugging
• Dynamic margins in pull quotes

Oct/Nov

• inspection Widget

Nov/Dec

• varla-varfo flow chart
• separate wiring from type-spec data in CSS and Javascript
• identify and research bug for GRAD in subscript/superscript (can’t fix so far)

Jan 2022

• dynamically update inspector report when state changes

Software Flow Chart

Outlook and Tasks for 2022

• support different languages, e.g. German will likely need longer shortest lines
• integrate with existing VideoProof, TypeTools
• make justification more stable (it still has some issues in some cases)
• add handling of very small portals and portals far away and for different reading contexts/modes (presentational/informational).
• detecting portals merely by resolution/screen-pixel-count is likely insufficient
• maybe include CSS-Calibration for portal-proofing
• improve UI (better structuring, design)
• custom type-specs editor
• support for other fonts
• add UI to customize the type-spec setup (related to TypeTools?)