August 14th, 2021

Cascadia Code Font

Murray Sargent
Principal Software Engineer

For many years, I’ve wanted to use real mathematical notation in computer programs for code that is mathematical in nature. The document UnicodeMath discusses this in some detail in Section 6. Using UnicodeMath in Programming Languages. Over the years, some advances beyond ASCII (invented in the 1960’s!) have been made. For example, you can use Unicode math alphabetics as variable names in the C++ compilers for the major platforms. In math documents, the index for a summation is often a math-italic letter such as 𝑖, 𝑗, 𝑘, 𝑙, 𝑚 or 𝑛. You can use these math-italic characters in your C++ programs! In fact, an 𝑛 (U+1D45B) for-loop index has been shipping for several years in RichEdit C++ code running on iOS, Mac, Android, and Windows. Unicode also has myriad mathematical symbols, including the very common ≠, ≤, and ≥. Wouldn’t it be nice to see those mathematical symbols instead of the 1960’s !=, <=, and >= ?! Well, you can see them by switching your font. The resulting math spacing isn’t perfect since it needs to maintain fixed-width character spacing, but the code is easier to read. This post describes one such font, Cascadia Code PL, which I use in Microsoft Visual Studio and in the Microsoft CodeFlow code-review program.  Other fonts with similar capability are described in 5 monospaced fonts with cool coding ligatures | Better Web Type.

The Cascadia Code font is an open-source font developed to improve the readability of program text in plain-text editors such as in the Windows Terminal, Microsoft Visual Studio, and Visual Studio Code. A major restriction in these contexts is fixed-width character spacing. So, in displaying “<=” as ‘≤’, some extra leading and trailing space is added, and the glyph is widened. The font also works as designed in Notepad. It uses 104 ligatures as well as extendable glyph sequences to render character combinations such as shown in the table

characters display mechanism
<= ligature
>= ligature
!= ligature
==> sequence
<== sequence
===> sequence
<=== sequence
:= ligature

When you concatenate many equal signs together, you see a continuous horizontal double bar, which is a great way to divide up sections of code. And you can insert ‘<’ and ‘>’ along the way to make super long arrows with or without tails.

Let’s examine how Cascadia Code displays “<=” as ‘≤’. Consider the string “a<b<=c=d”. It is rendered using the glyphs

a < b c = d
00e1 0809 00fc 0a72 0c2d 00fd 0806 0103

Here the glyph 0a72 is named less_equal.liga and is the complete ≤ ligature. The glyph 0c2d is named LIG and has no ink. LIG is included to preserve the two-character advance width and the two-character count. Many other glyph pairs have LIG as the second “glyph”. The advance widths and left side bearings of the symbols are

glyph ID advance width left side bearing name comment
0806 1200 100 equal
0809 1200   96 less
0a72 1200 506 less_equal.liga large left side bearing
0c2d 1200     0 LIG 0 left side bearing

The sequence ==> is displayed as ⇒ by the glyph sequence 0a93 0a91 0a99, where 0a93 starts the horizontal double bar, 0a91 continues it and 0a93 finishes it with an arrowhead.

Cascadia Code PL includes italic, variable-font weights from 200 to 700, Hebrew, Arabic, braille cells, line drawing characters, and lots more cool transformations. If the font isn’t installed on your computer, you can download it from here. Happy programming!

Author

Murray Sargent
Principal Software Engineer

Yale BS, MS, PhD in theoretical physics. Worked 22 years in laser theory & applications first at Bell Labs and then Professor of Optical Sciences, University of Arizona. Worked on technical word processing, writing the first math display program (1969) and the technical word processor PS (1980s). Developed the SST debugger we used to get Windows 2.0 running in protected mode thereby eliminating the 640KB DOS barrier (1988). Have more than 100 refereed publications, 3 laser-physics books, 4 ...

More about author

1 comment

Discussion is closed. Login to edit/delete existing comments.

  • jivan Vyas

    Thanks for sharing useful information with us. It is really helpful to me. I always prefer to read the quality content and this thing I found in your post.

    Best Regards
    https://asianetindiadesignz.com/