Typography

There are a few typography-related edge cases to consider when you venture past ASCII.

General rules

Code.Movie works on the assumption that you use a monospaced font for code. It creates a grid based on the width of the 0 character in your main font (set via font-family on the container element) and places every character and decoration on this grid. Anything but fixed-width fonts will lead to terrible-looking results.

CJK full-width characters

CJK full-width characters such as 한 occupy two grid columns.

Emoji

The first thing to note about emoji is that whether or not a character is rendered as an emoji (and how it gets rendered) depends entirely on the font being used. If you intend to use emoji I strongly recommend that you explicitly pick and use an emoji font like Noto Color Emoji - otherwise you are at the mercy of whatever the user has installed on their machine.

Emoji, like CJK full-width characters, are allocated precisely two columns of space. Whether this will look good depends on the combination of fonts being used. I recommend that you use the size-adjust CSS property in your @font-face rule to scale emoji to work well with your main font:

@font-face {
  font-family: "Noto Color Emoji";
  src: url("fonts/NotoColorEmoji-Regular.ttf");
  size-adjust: 80%; /* Works well together with Ubuntu Mono */
}

@font-face {
  font-family: "Noto Color Emoji";
  src: url("fonts/NotoColorEmoji-Regular.ttf");
  size-adjust: 80%; /* Works well together with Ubuntu Mono */
}