Hi @benface, this seems like one of the problems that CSS Variables were designed to solve for us—passing down values from a parent to its children! I'd rather embrace a solution that uses CSS features available today (using CSS Variables to their fullest) rather than expanding CSS to include new units to accomplish something that's already possible.

In this particular case of "passing down a value from a parent to its children" you want a new unit to set letter-spacing but how many other use-cases of the same "passing down a value from a parent to its children" technique that CSS Variables currently support would adding this new 'letter-spacing' unit help? Probably not that many other use cases.

So, phrased another way: How many new units would you need to add to CSS if we want to avoid using CSS Variables cases where we want to pass a value down to children?

Makes sense @tomhodgins, but I would add two things:

• I'm not proposing a new unit per se; unitless values are allowed in lots of places across CSS.
• A huge part of what bothers me about this is that it's inconsistent. I feel like line-height and letter-spacing are very closely related, they are basically leading and tracking for CSS, vertical and horizontal spacing. It annoys me that I cannot use the same units between the two properties.

Note: unitless values are a new unit - they're just a lazier way of adding a new unit without actually minting a new suffix. I'm trying to avoid adding new ones in new designs, when possible - when plain numbers are actually lengths in disguise, it makes calc() dramatically more complicated. (See the third note in https://drafts.csswg.org/css-values/#calc-syntax where we talk about how it's not actually allowed - you can't add together line-height: 1 and line-height: 20px into a line-height: calc(1 + 20px) - we'd need to mint an actual unit for that to work.)

I was thinking about this problem just the other day, and was surprised this wasn't a solved problem already. Totally agree with the premise.

@tabatkins We could use percents here. It's inconsistent with how line-height works, but imho line-height's use of percents is broken; we don't resolve them anywhere else.

An interesting question is whether the ratio should be relative to em or ch; imho we should go with em which is more fundamental, and once we have unit math calc() can be used to provide the other ratios.

So the proposal is that letter-spacing accept percentages, which inherit as percentages, with 100% = 1em on the current element.

Then there's the question of what word-spacing should do. Currently a percentage on word-spacing multiplies the width of the affected word separator character (typically a space, but some scripts use a visible glyph, Ethiopic being the main one with contemporary use). Should we keep that definition or make it match word-spacing?

Then there's the question of what word-spacing should do.

BTW. Why word-spacing:0px still make a gap between words? Is there solution to set no spacing between words and between inline-blocks without removing CR LF from code?

@fantasai, I believe that calculating percentage from the width of the normal inter-word space is useful (one quite common use case would be removing spaces completely with word-spacing: -100%, some designs could require doubling the spaces with 100% value, etc.). I'd say that letter-spacing values relative to the inter-word space width (e.g. spacing the letters for a half of it) also would have its use cases (Photoshop is not the only design tool, after all, designing directly in browser is also quite popular), so if font-related percentages would be redefined, it would be worth reintroduce this measure as a new unit (maybe ws?) suitable for both properties, as well as for margins/paddings etc.

And what about reusing the fr unit for font-related properties? It's already a "length-but-not-exactly", it means "fraction", so it could inherit as a fraction of the font-size instead of the computed length... Is it a too crazy idea?

@Nadya678, the word-spacing property is defined as an "extra spacing in addition to the intrinsic inter-word spacing". The currently proposed (yet not supported by browsers) standard CSS way to shrink inter-word spaces to zero is word-spacing: -100%. The most common practical CSS solutions are either setting font-size: 0 to the container and resetting it for the items, or setting the word-spacing to some negative value like -0.31em (the exact value depends on the white-space character width, usually between 0.25 and 0.4em). For monospace fonts, word-spacing: -1ch should work. Another option is to use a custom font where the whitespace character has zero width (like this). However, the best way to avoid unwanted spaces between design blocks is not using inline-blocks for them at all and using Flexbox instead.

I thing the word-spacing: -100% or word-spacing: none is good solution for it. I know about hacks for it but I like use CSS without modyfing HTML (additional blocks, or the > closest the <, but the code is less clear to read).

BTW. The flex-box has side effects and It cannot be used in part of layouts. Also hacks has side efects like losing of antialiasing on iOS browsers (font-size:0).

doubling the spaces

Yes - for part of standard fonts it is very appreciated.

And what about reusing the fr unit for font-related properties?

How will it work? How to use the pseudo-unit for spacing?

The Working Group just discussed font-relative letter-spacing, and agreed to the following resolutions:

• RESOLVED: defer this to text L4

@litherum points out in #3118 that we also have this problem with text-underline-offset.

The CSS Working Group just discussed Allow letter-spacing to have unitless values like line-height, and agreed to the following:

• RESOLVED: Add a % value to letter-spacing, word-spacing, text-decoration-width, text-underline-offset that is an inheritable proportion of font size

Using % to do this sounds a bit weird to my front-developer ear. Maybe just because it's new. Maybe because there is something weird about it. When I feel this way, I like to bounce things off other FEDs, to see what they think. So I wrote a poll on Twitter during the F2F, just to see what happens / to see if there's universal outcry of yuk, or how people react... https://twitter.com/jensimmons/status/1054309608574148610

FWIW I think letter-spacing is today better dealt with as a font-variations-settings axis, rather than as a text/typesetting layout engine property :)

But not all fonts will support that.

Also, in the twitter thread Jen instigated, I suggested "per mille of em" and have this follow up from DB

Anything that’s based on the em is fine. Permille, percent, and upm are three good examples, and are all convertable via math, although rounding is the biggest issue with conversion.

Anything that’s based on something else, the “default” instance, or “regular”, or a % of that... Anything where the Relationship between that and the em is unknown, (such as wght, wdth or slnt) those are bad, and are not interchangeable via math. Knowing the relationship between the default and the em is the biggest issue.

I will quote my tweet here (
https://twitter.com/boletrone/status/1101528134518820864):

“I proposed that CSS should honor a long-standing typographic tradition, in which:

Tracking of 17 → 17 thousandths of an em.

All professional software does it correctly.

It’s like telling astronomers they must define apparent magnitude in lux.

It shouldn’t be up for debate.”

@decivilizator We try to avoid unitless numbers that ultimately resolve to lengths, it creates problems in calc() IIRC, and down the line can create parsing ambiguities or syntactic inconsistencies if we end up combining it with other number representations.

The advantage of using percents over a custom unit here is that they are a type of value that already exists, and get preserved distinctly from lengths during inheritance (which is the behavior we need here). But introducing a new unit such as upm is a valid alternative.

Fixed for text-decor-4, still needs edits for css-text-4 (but that's pending merge of css-text-3 into css-text-4).

@fantasai I think it's bad that this behaves differently from line-height: <percentage>. This behaves more like line-height: <number>, if I understand correctly, right?

Percentages usually resolve "as soon as possible", this breaks that rule by intentionally inheriting them like percentages rather than the resolved length.

(Or otherwise this doesn't fix the bug, right?)

To be clear, line-height: <percentage> computes to a <length> in all browsers:

<!doctype html>
<style>
  div {
    line-height: 100%;
    font-size: 16px;
  }
  span {
    font-size: 32px;
  }
</style>
<div><span></span></div>
<pre>
<script>
  document.write(getComputedStyle(document.querySelector("span")).lineHeight);
</script>
</pre>

Shows 16px, not 32px.

Not sure how I feel about this... the inconsistency is regrettable, but the proposed behavior here (inheriting as a percentage and resolving "late") is more useful than computing to a <length> and inheriting that, and expressing the value as a percentage seems better than a unitless number.

The behavior of line-height: <percentage> seems more like an unfortunate (but no doubt unchangeable) legacy misfeature than a desirable feature; it would be sad if it forever blocks us from using percentage values in a more useful way in new properties.

it would be sad if it forever blocks us from using percentage values in a more useful way in new properties

But are there properties where a percentage value is inherited as a percentage? I can't think of any.

I think that's how background-position-{x,y} works, for example?

All layout-relative percentages are inherited as percentages. The problem is that I'm not sure any of them inherit by default, so you'd only see the effect if you were explicitly using the inherit value, which is quite rare.

This is probably close to a category feature: the only reason to resolve post-computed value is if you depend on layout, or have a special reason to want your resolution-reference to change as you inherit; (almost?) all of the former are non-inherited layout-related properties, while the latter is rare (like currentcolor).

All layout-relative percentages are inherited as percentages. The problem is that I'm not sure any of them inherit by default, so you'd only see the effect if you were explicitly using the inherit value, which is quite rare.

Yes, sorry, I meant for inherited properties. I could only think of font-size which behaves like line-height.

Looking back, I see that @fantasai explicitly mentioned the inconsistency with line-height back in #2165 (comment) (the original suggestion to use percentages).

Personally, I agree with the assessment that "line-height's use of percents is broken", and I don't think we should let that stand in the way of using percent more appropriately here.

I think it's still a bit weird that it's inconsistent with both font-size and line-height, but...

Should this be accepted, I would hope word-spacing would be treated in similar fashion.

The Working Draft "CSS Inline Layout Module Level 3" mentons:

The fact that percentages compute to lengths is annoying
https://www.w3.org/TR/css-inline-3/#line-height-property

I think this applies to all non-unitless values for line-height and letter-spacing, not just percentages.

To fix this behavoir, i would love a property like font-inheritance with the possible values: length, unit

Finally got around to merging CSS-TEXT-3 into CSS-TEXT-4. :/ Edits for this issue are now also in, so closing out.

I just wrote a kind of follow-up to this issue, for those who are interested: #9612