Fix word breaks #1271
Fix word breaks #1271
Conversation
|
Just want to note that @melissaperreault noticed that buttons (example: rich text) can also have issues with longer labels:
|
There was a problem hiding this comment.
Thanks you Kai!!
Everything looks good except the Collage edge-case findings and other areas we could benefit from word-break as a quick follow up. I tested all instances a label could have a very long word.
Edge-case
- Collage's Collection block going off screen. The parent container
card__informationis stretching, it seems.
Other text findings
- Rich text button off screen
- Featured Collection button off screen
- Blog posts View all link
- Blog comment off screen
- View full details on Featured product layout not optimal
- Image with text button off screen
- Filter label on Collection template would push the product count
- Cart
Continue shoppingbutton off screen - Cart notification: All CTAs go off screen
- Cart template Continue shopping link off screen
- Cart template Checkout button off screen
- Login: Forgot password long label should remain left aligned
- Login Sign in button off screen
- Account details: Long name or long address go off screen
- Addresses: Return to Account and Add new address go off screen + to check the Address and details and the other buttons (Edit and Delete) going off screen
| @@ -311,13 +311,11 @@ | |||
|
|
|||
| .image-with-text__heading { | |||
| word-break: break-word; | |||
| hyphens: auto; | |||
There was a problem hiding this comment.
Remove usage of hyphens CSS property
Can you share a bit more context on the decision to remove hyphens? I probably missed this conversation, but would love to know the rationale behind this so we can have it documented :D
There was a problem hiding this comment.
Hyphens are very unpredictable and override any other wrapping behaviours we try to apply. Word break, overflow break, etc... - they are all overridden by the hyphen rules. Unfortunately, on top of that, the rules are independent of whether or not the font actually supports hyphens. So you can get situations where the hyphens are breaking something that wouldn't otherwise be broken, and which would look okay with a - character, but where the - is not being drawn because of the font.
So to make it so that everything is predictable and all works the same, we are using word break. We will be revisiting this to instead use overflow-wrap: break-word, most likely, but that requires some additional work and testing. Also we need to consider what we want to do for other things like paragraphs and buttons.
It might just end up being a situation where we add a setting for the merchant to pick how they want this handled, especially to account for different expectations in different languages. Though things do get interesting with stores that multi-language, since settings aren't language specific.
|
@melissaperreault Created follow up issue for items you noted. #1273 |
* Add word-break to headings * Remove usage of hyphens css property due to unpredictability * Change collection card heading to h3 style instead of h1
Why are these changes introduced?
Mitigate visual issues caused by headings overflowing containers and word breaks
What approach did you take?
1. Remove usage of
hyphensCSS propertySome fonts (example: Americana) do not properly support
hyphens: auto, resulting in unnecessary breaks in words with no actual hyphen rendered (see screenshot below). Also see #1271 (comment)2. Add
word-break: break-word;for all headingsThis prevents headings (which are typically set to larger font-sizes) from overflowing containers.
3. Change collection card headings to
H3style instead ofH1styleReduce likelihood of text overflowing containers by reducing font-size.
Other considerations
Demo links
Checklist