Financial-Times / o-typography

Typography and vertical rhythm styles for FT branding
http://registry.origami.ft.com/components/o-typography
10 stars 2 forks source link

To add a better headings feature to Product-Headings (experimental) #136

Closed draysonandstock closed 5 years ago

draysonandstock commented 6 years ago

To help avoid widows within our headings we can use the following to act the same as a &nbsp but allows us to avoid JS/jQuery.

<h1 class="post-title">How to Improve HTML Heading Layout <span style="white-space:nowrap">without jQuery</span></h1>

We would need to add some kind of utility class to the above to apply the markup/html to the last two words in any given heading span.

This is to offer a better reading experience for our users.

Cheers, James

notlee commented 6 years ago

👍Thanks, that definitely seems like a better reading experience. Though there are some cases where I think that might be suboptimal, e.g.

screen shot 2018-03-14 at 17 09 20

The logic might want to account for cases like this in some way. Maybe by ensuring the number of words on the previous line are greater than the final line, otherwise allow a widow. But that doesn't account for word length.

notlee commented 5 years ago

Closing this due to lack of activity, we don't intent to add the utility presently.