Document percentage letter-spacing and word-spacing values#43356
Conversation
chrisdavidmills
requested review from
hamishwillee
and removed request for
a team
github-actions
bot
added
Content:CSS
|
Preview URLs (2 pages)
Flaws (4) Found an unexpected or unresolvable flaw? Please report it here. URL:
URL:
(comment last updated: 2026-03-09 18:19:45) |
files/en-us/web/css/reference/properties/letter-spacing/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/reference/properties/letter-spacing/index.md
Outdated
Show resolved
Hide resolved
| ``` | ||
|
|
||
| > <p lang="ar" dir="rtl">شسيبتنمك</p> | ||
| {{ EmbedLiveSample("i18n-sample", "100%", 60) }} |
There was a problem hiding this comment.
Can we use a bigger font - the rendered text is almost invisible.
There was a problem hiding this comment.
I've added some hidden CSS to give it a bigger font-size and a little bit of margin at the start of the line.
BTW, I was originally going to show two examples, one with and one without letter-spacing, to demonstrate the problem, but letter-spacing seemed to make no difference, so I've just left it like this and used some hand-wavy language. I didn't want this little bit to derail the PR, as it's not the main point of it.
files/en-us/web/css/reference/properties/letter-spacing/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/reference/properties/letter-spacing/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/reference/properties/letter-spacing/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/reference/properties/letter-spacing/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| {{ EmbedLiveSample("live-sample___basic-usage", "100%", "100") }} | ||
|
|
||
| ### Length and percentage word spacing comparison |
There was a problem hiding this comment.
So it is a matter of taste, but I prefer
| ### Length and percentage word spacing comparison | |
| ### Comparing word-spacing using length and percentage |
There was a problem hiding this comment.
I already did this one, thanks!
|
|
||
| {{ EmbedLiveSample("percentage-versus-length", "100%", 460) }} | ||
|
|
||
| First, note how the initial length word spacing value looks OK when applied to the larger font sizes, but it doesn't look good on the smaller font sizes. Now check the checkbox, and note how the percentage word spacing looks appropriate on all lines, as it scales with the font size. Percentage `word-spacing` values are useful for responsive text sizing. |
There was a problem hiding this comment.
Same comments as https://github.com/mdn/content/pull/43356/changes#r2902652363
hamishwillee
left a comment
hamishwillee
left a comment
There was a problem hiding this comment.
Looks good. Just a few suggestions.
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
hamishwillee
left a comment
hamishwillee
left a comment
There was a problem hiding this comment.
LGTM! Thanks very much.
2 participants
Description
Chrome 145 adds support for percentage values on the
letter-spacingandword-spacingproperties.See https://chromestatus.com/feature/5106867491700736.
This PR documents percentage values for these two properties, including descriptions and examples.
Motivation
Additional details
Related issues and pull requests