Text & Font Refinements

Text & Font Refinements

Niche-but-useful text knobs.

text-decoration variants

a {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

Wavy underlines, custom colors, thickness.

text-justify

Fine control for justified text:

p {
  text-align: justify;
  text-justify: inter-word;   /* default-ish */
  text-justify: distribute;
}

text-emphasis

Circles/dots above CJK text:

ruby { text-emphasis: circle red; }

font-feature-settings

OpenType features (old-style figures, ligatures):

.old-nums {
  font-feature-settings: "tnum";   /* tabular figures */
}

font-kerning & optical sizing

p { font-kerning: normal; }
p { font-optical-sizing: auto; }

tab-size

pre {
  tab-size: 4;
}

TL;DR

• Customize underlines (wavy/color/thickness).
• text-justify refines justified layout.
• OpenType via font-feature-settings.
• tab-size for pre/code blocks.
• text-emphasis marks CJK annotations.