Letter Spacing is Broken and There's Nothing We Can Do About It... Maybe

This article explores a fascinating discussion within the CSS Working Group (CSSWG) concerning the letter-spacing property. A senior Mozilla developer highlighted a long-standing discrepancy between how browsers render this property and its actual CSS specification. This seemingly simple property reveals surprising complexity.

The core issue stems from how browsers handle the spacing between characters. While humans intuitively understand letter spacing, computers require a defined strategy. Should the space be added before, after, or equally distributed around each letter? Should this differ between left-to-right (LTR) and right-to-left (RTL) languages? The chosen strategy significantly impacts text measurement and line breaks.

Currently, browser implementations deviate from the CSS specification. The spec intends spacing to occur between characters, but browsers typically add space at the end of each character. This inconsistency exists across different rendering engines like Gecko (Firefox), Blink (Chrome, etc.), and WebKit (Safari).

The CSS specification defines letter-spacing as: "Specifies additional spacing between typographic character units." However, the common browser implementation adds extra space at the end of each character, leading to asymmetrical spacing, particularly noticeable in centered text or RTL languages. In RTL languages, the discrepancy creates a gap at the beginning of the text.

Why this discrepancy? Changing the established browser behavior would risk widespread website breakage due to altered text measurement and line breaks. Websites may have already compensated for the current behavior through workarounds, making a change disruptive.

Two potential solutions are being considered:

Option 1: Rework Space Distribution: The specification could be revised to mandate equal space distribution before and after each character. This would create symmetrical spacing but still carries the risk of layout changes.

Option 2: Developer-Controlled Placement: Introduce a new property (e.g., letter-spacing-justify) allowing developers to specify where spacing is applied (before, after, left, right, between, around). This offers flexibility, maintaining backward compatibility while enabling improved spacing control for new projects.

A third option, maintaining the status quo, is less likely given the CSSWG's commitment to addressing this issue. The most probable outcome appears to be Option 2, providing developers with greater control over letter-spacing behavior. The journey towards a more accurate and consistent letter-spacing implementation is ongoing, highlighting the intricacies of web typography.

The above is the detailed content of Letter Spacing is Broken and There's Nothing We Can Do About It... Maybe. For more information, please follow other related articles on the PHP Chinese website!