Skip to content

[css-text-decor] Positional adjustment of line-through and overline #799

@Crissov

Description

@Crissov

Based upon my comment in #711:

There should be either another value for text-decoration / text-decoration-line to get a line crossing through ascenders or, preferably, new properties text-overline-position and text-line-through-position (or a compound text-decoration-position) to adjust the position determined by the font file.

  • underline: Each line of text is underlined.
  • overline: Each line of text has a line over it (i.e. on the opposite side from an underline).
  • line-through: Each line of text has a line through the middle.

The most important reason (in Western typography) to desire text-decoration-skip: ink; is that underline cuts through descenders of lowercase letters (like g, j, p, q, y). However, neither overline nor line-through regularly cuts through the ascenders of lowercase letters (like b, d, f, h, [i, j], k, l, t), because overline is usually placed above the ‘H’ height of uppercase letters (possibly without diacritic marks) and line-through is set lower than the ‘x’ height of lowercase letters to affect short ones (like a, c, e, m, n, o, r, s, u, v, w, x, z), too.

s, strike, del {
    text-decoration: line-through;
    text-decoration-skip: ink;
    text-line-through-position: over; /* over unspecified “middle”, i.e. above x-height */
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions