search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.16k stars 320 forks source link

Revert fix for wrapping of long lines of text #1211

Closed edwardhorsford closed 5 years ago

edwardhorsford commented 5 years ago

In #1169 a fix was added to force long lines of text to wrap - aiming for URLs.

@@leekowalkowski-hmrc points out that this forces all words to wrap - significantly reducing legibility.

Example: screenshot 2019-02-21 at 13 15 29

I propose we revert #1169 until a better fix can be found.

I think we've likely made a more common case worse (paragraphs of text) to improve a less common case (long urls).

I also wonder if we have test pages for some of these patterns that would have let us catch this - ideally a page with the extremes of the sort of data that might be used.

edwardhorsford commented 5 years ago

It sounds like #1185 may partially fix this - but if I'm reading correctly, some browsers will still get broken words.

NickColley commented 5 years ago

This will be resolved when we release the new version with the fixes in #1185

There may be a way to try other css properties as well, to get better coverage on non-blink/webkit browsers.

edwardhorsford commented 5 years ago

@nickcolley I'm wary of 'most browsers' - what browsers does it not fix? Is it worth not attempting to wrap those browsers? I'd argue wrapping paragraphs of text mid-word is probably worse than not wrapping urls.

NickColley commented 5 years ago

Looks like it'd be good to investigate overflow-wrap: break-word but it's worth noting that it has no support in older browsers: https://caniuse.com/#feat=wordwrap

So we'd need to address that in the same way we have considered this in the fix which is currently merged.

leekowalkowski-hmrc commented 5 years ago

We need word-wrap: break-word, too:

word-wrap: break-word;
overflow-wrap: break-word;

The property was renamed when it was adopted into the standards.

NickColley commented 5 years ago

We should also consider improving the extreme examples we have to include content that it's clearer the issues, since lorem ipsum always looks hard to read ;)

http://govuk-frontend-review.herokuapp.com/components/summary-list/extreme/preview

NickColley commented 5 years ago

I will be looking into this soon, hopefully release a fix for this next week, thanks again for your patience.

NickColley commented 5 years ago

@edwardhorsford @leekowalkowski-hmrc it would be good to get your feedback on this improvement I've proposed based on what you have been suggesting: https://github.com/alphagov/govuk-frontend/pull/1220

It makes a compromise that columns are slightly smaller then they were which I think is reasonable given the improvements in legibility...