Update on Figure Caption Color Indicators

Posted on October 31, 2020

Last year, I published a blog post on figure caption color indicators. The positive feedback I received on it from a number of individuals prompted me to revisit the subject. At the time, I did not have a good way of locating published examples of such caption indicators and was only able to locate a few published examples with shape indicators but none with color indicators. When thinking about revisiting the subject, I had the epiphany that although searching for such indicators in the published literature is next to impossible, searching in the LaTeX source markup for papers is not. As arXiv provides bulk access to the TeX source markup for its pre-prints, this provided a large corpus of manuscripts to search through. After finding examples in pre-prints, I was then able to see if the indicators survived the publication process and was thereby able to locate well over one hundred examples of color line or shape indicators in the figure captions of published academic papers. Continue reading →

Posted in | Tagged , , , , , | Leave a comment

Pre-calculated Line Breaks for HTML / CSS

Posted on May 25, 2020

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.
Continue reading →

Posted in , | Tagged , , , , | Leave a comment

A Case Study in Product Label Regressions

Posted on March 29, 2020

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.

No salt added green beans cans: old design on left, new design on right Continue reading →

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

Posted in , | Tagged , , , , | Leave a comment

Color Cycle Survey Update

Posted on January 31, 2020

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.

Six-Color Ranked Color Sets Visualization Continue reading →

Posted in , | Tagged , , , , , , | Leave a comment

Figure Caption Color Indicators

Posted on November 23, 2019

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 →

Posted in , | Tagged , , , , , | Leave a comment