I was working on my startup’s food safety score web app, writing code to clean up imported text like,
DELI DISPLAY COOLER HOLDING CREAM CAKE AT 44.6F BUT LOWER CORNER OF UNIT HOLDING FOODS @ 39F
We decided to make this as readable as possible without changing the content. And so, the finished text should have improved capitalization, punctuation, and typography:
The interesting part was the temperatures. First I looked for a style guide because I realized I didn’t even know how a temperature should be punctuated; e.g. should there be any spaces within it? The National Geographic Society’s style manual was a good match for us. It prescribes no space between the final digit and the degree symbol:
F is the abbreviation for Fahrenheit: 32°F (no spaces, no period)
I then discovered four different, valid ways of writing this in HTML, each producing unique results:
| Strategy | Code | Screenshot |
|---|---|---|
| HTML entity for degrees Fahrenheit | #&8457; |  |
| HTML entity for degree symbol with a normal F | °F |  |
| Unicode degrees Fahrenheit character | ℉ |  |
| Unicode degree symbol with a normal F | °F |  |
Notice how the fourth option both looks the best and it’s the easiest to read in the HTML source. That’s what I went with. Clearly there’s an interaction between the browser, the font, and the implementations of these protocols.
Dogweather 