Improve handling of body overflow

[JayPanoz]

I'm submitting a need for improvement

We have several issues related to overflow in body (CSS multicolumn) so there is clearly a need to improve ReadiumCSS here.

List of know issues:

• 129

• 127

• 119

At least text shouldn’t be visibly overflowing in the next column, but if we can also guarantee it will break in order to stay readable, this will be a better solution, obviously.

[JayPanoz]

OK so I explored overflow: clip as it was first mentioned in #119 to see how it could solve all issues.

As a disclaimer, we’re already finding ourselves dealing with progressive enhancement and the lack of guideline/policy (issue #139) given it’s part of the 2022 baseline, with support available from Chrome 90, Firefox 80, and Safari 16.

As a spoiler, this would be an incomplete fix due to partial support of overflow-clip-margin.

MDN docs

• Overflow: clip
• overflow-clip-margin

Support

• overflow: clip
• overflow-clip-margin

Summary

Overflow content is clipped at the element's overflow clip edge that is defined using the overflow-clip-margin property. As a result, content overflows the element's padding box by the value of overflow-clip-margin or by 0px if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new formatting context is created. To establish a formatting context, use overflow: clip along with display: flow-root. The element box is not a scroll container.

My guess is flow-root may help with scroll performance if needed.

Recap

In theory, this could help solve this issue. At least in isolation in ReadiumCSS, it is working as expected as a fix – of course it’s another story in apps injecting ReadiumCSS.

Anyways, adding the following deals with all the overflow issues:

:root {
  overflow: clip;
}
body {
  overflow: clip;
  overflow-clip-margin: content-box;
}

You need both overflow: clip in :root and body.

As a reference, no overflow is set and you can see the link doesn’t wrap and may flow into the next column:

Without overflow-clip-margin, this is what happens with a link that doesn’t wrap. You can still see it overflow in the “page margins” (which is padding added to columns).

With overflow-clip-margin: content-box, it works as you would expect, as the link doesn’t overflow any longer.

I’ve checked and element.scrollLeft and transform: translateX() work as expected in JS. At least it doesn’t break it.

Issues

Update: Turns out the support tables you can find on popular websites were wrong…

As far as ReadiumCSS is concerned, mainly support, which means this would fix overflow issues for the latest versions of browsers/webviews, but only partially due to the support of overflow-clip-margin:

• it’s not supported in Safari/iOS It is supported in Safari/iOS
• it’s only supported if overflow: clip is set for both axes in Chromium (i.e. you can’t set overflow-x: clip only)
• content-box is not supported in Firefox nor Safari

As far as apps are concerned, this is unknown.

Conclusion

This is not ready for prime time, another solution should be explored. has potential as a progressive enhancement. However, this means previous versions that do not support it have to rely on overflow: hidden – it’s used in other Reading Systems though, so it’s a confirmation of sorts that it can help alleviate this issue.

[fondoger]

Does the below code resolve the issue?

overflow-wrap: break-word;

[JayPanoz]

@fondoger Thanks for weighing in and pointing that out.

From initial testing it created some issues and didn’t necessarily offer the best expected results, especially in hyphenated contexts.

However, it’s something that might be revisited in the future, with the implementation of version 2 in toolkits. We will have to pay a particular attention to the overflow issue for practical reasons so I’m expecting additional effort being spent in the upcoming weeks.