![]() ![]() ![]() the problem with %s is that right now word-spacing uses them to mean the percetnage of the width of the space character so in this case you couldn't add 1px + 5%-of-font-size other option is to add another unit like frs, that kind of represent lengths you probably also want to calc them together they inherit as absolute lengths rather than a font size fraction several places relating to text where we currently allow lengths, ems are nice in these cases, you want letter-spacing or whatever to be font size relative myles raised a similar issue on that spec one is this one, another is wrt text-decoration fantasai: there are several related issues here Topic: Allow letter-spacing to have unitless values like line-height RESOLVED: Add a % value to letter-spacing, word-spacing, text-decoration-width, text-underline-offset that is an inheritable proportion of font size.The CSS Working Group just discussed Allow letter-spacing to have unitless values like line-height, and agreed to the following: florian: For letter spacing I feel confortable defer fremy: I understand what we're doing In previous issue with cr we render because it's a control character. fantasai: word spacing the % means that character's own width. florian: TabAtkins doesn't like unitless values fantasai: We can add unitless values or add % or add a united value. (dbaron: on, I see, yes, we enabled that in nightly) Might have to go in L4 unless someone has a quick solution. rune_: btw, Blink does fail the tests in web-platform-tests/wpt/pull/10422 for elements not in the flattened tree, at least on release. The Working Group just discussed font-relative letter-spacing, and agreed to the following resolutions: However, the best way to avoid unwanted spaces between design blocks is not using inline-blocks for them at all and using Flexbox instead. ![]() Another option is to use a custom font where the whitespace character has zero width ( like this). For monospace fonts, word-spacing: -1ch should work. 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). The currently proposed (yet not supported by browsers) standard CSS way to shrink inter-word spaces to zero is word-spacing: -100%. Is it a too crazy the word-spacing property is defined as an " extra spacing in addition to the intrinsic inter-word spacing". 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.Īnd 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. I'd say that letter-spacing values relative to the inter-word space width (e.g. Related to 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'm aware that we can achieve this with custom properties ( ), but I feel like it's still worth adding. We would simply have to remove the em in the example above and it would work. I believe a unitless value for letter-spacing should work exactly like that. Notice in the example above, the line height is set to 1.5 times the font size, and it properly propagates down to h1 and any other descendant that changes the font size. Introduce a new unitless value option for letter-spacing that works like line-height's unitless values. We have to duplicate the letter-spacing: 0.1em rule every time we change the font size in a descendant to have the result we want. rich-text and becomes a fixed 1.6px, so in an h1, even though we set the font-size to 32px, the letter spacing is still 1.6px and not 3.2px like we'd expect. However, that value is computed directly in. This is the equivalent of setting the "tracking" in Photoshop to 100 since "Tracking and kerning are both measured in 1/1000 em" (source: ). In this example, we want the letter spacing to be 0.1 times the font size. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |