## Pre-calculated line breaks for HTML / CSS

Although slowly improving, typography on the web pages is considerably lower quality than that of high-quality print / PDF typography, such as that produced by LaTeX or Adobe InDesign. In particular, line breaks and hyphenation need considerable improvement. While CSS originally never specified what sort of line breaking algorithm should be used, browsers all converged on greedy line breaking, which produces poor-quality typography but is fast, simple, and stable. CSS Text Module Level 4 standardizes the current behavior as the default with a text-wrap property while introducing a pretty option, which instructs the browser to use a higher quality line breaking algorithm. However, as of the time of writing, no browsers supported this property.

## A Case Study in Product Label Regressions

Sometime last year, the Shop & Shop and Giant (of Landover) grocery store chains began introducing redesigned packaging for their store brand products. The two chains share a parent company and share branding, so the labels only use the shared logo without a brand name. The old label designs heavily featured a white background, which made them easy to locate in the store.1 The new brand identity is less distinct, but whether it’s better or worse is a matter of taste. However, there are specific design decisions that were made on some of the labels that have fundamental issues.

In particular, I will focus on the labels for canned vegetables. As one would expect, both the old and new label designs feature the name of the vegetable along with a picture of a “serving suggestion.” Since many vegetables are similar in color, it is often easier to find one’s desired vegetable on the shelf by looking for the name, especially when a particular vegetable comes in multiple variants, such as green beans (whole, cut, diagonally cut, and French style). The old design featured a plain sans-serif font in a dark color on a solid white background, resulting in good contrast and readability. The new design, however, is a clear regression; it trades the consistent, easily readable font for a hodgepodge of different heavily-stylized display fonts on a busier background with lower contrast, which results in much worse readability. This loss of readability makes it take longer to locate a particular product on the shelf.

1. It’s the closest I’ve seen to what’s suggested by xkcd: Brand Identity.

## Color Cycle Survey Update

Since my last update on the Color Cycle Survey, there have been no drastic changes, but responses have continued to trickle in. There are now ~13.7k total responses, with ~6k responses each for the six color and eight color components. This long-delayed—and somewhat brief—post serves as an update to my previously published six color analysis, while also extending it to eight colors.

I have only made minor changes to the previously detailed analysis procedures (see previous set ranking and order ranking posts for details), but there are now ~50% more responses, which has helped with training stability and has reduced uncertainty between different models in the network ensemble. The figure below shows the fifteen lowest ranked six-color color sets on the left and the fifteen highest ranked six-color color sets on the right.

## Figure Caption Color Indicators

Earlier this year, I became aware of a feature in GitHub-flavored Markdown that displays a colored square inline when HTML color codes are surrounded by backticks, e.g., #1f77b4. Although I only recently became aware of this feature, it dates back to at least 2017 and is similar to a feature that Slack has had since at least 2014. When I saw this inline color presentation, I immediately thought of its applicability to figure captions, particularly in academic papers; as a colorblind individual, matching colors referenced in figure captions to features in the figures themselves can be challenging at times due to difficulties with naming colors. Thus, I added similar annotations to figure captions in my recently submitted paper, Two-year Cosmology Large Angular Scale Surveyor (CLASS) Observations: A First Detection of Atmospheric Circular Polarization at Q Band:

Fig. 2. Frequency dependence of polarized atmospheric signal at zenith for the CLASS observing site, both for circular polarization ($|V|$, shown in blue) and linear polarization ($\sqrt{Q^2+U^2}$, shown in orange). The light gray bands indicate CLASS observing frequencies, with the lowest frequency band corresponding to the Q-band telescope.

Fig. 5. Example binned azimuth profiles are shown…angle cut. The profile in blue is from a zenith angle of 43.9° and a boresight rotation angle of −45°, the profile in orange is from a zenith angle of 46.7° and a boresight rotation angle of 0°, and the profile in red is from a zenith angle of 52.8° and a boresight rotation angle of +45°.

The first caption refers to a line plot, while the second caption refers to a scatter plot with best fit lines. These examples, as well as underlining examples elsewhere in this post, display best in a browser that supports changing the underline thickness via the text-decoration-thickness CSS property. At the time of writing, this includes Firefox 70+ and Safari 12.2+ but does not include any version of Chrome; however, browser underlining support is still subpar to the underline rendered by $\LaTeX$, so the reader is encouraged to view the figures in the paper. Continue reading