Wrong example: G146: Using liquid layout

[michael-n-cooper]

From @jake-abma on March 31, 2018 12:53

Text will overlap and horizontal scroll will happen when scaling text / changing viewport as 32% width is, well…, 32% width so it can’t become too wide and will NOT wrap below. It happens to be so that because of the border-left=1px i.c.w. the percentage (no calc is used in CSS), at more extreme zoom / browser window scaling, you get a wrapping of column 3 but that's more of an accidental wrap than as consciously one.

Test: half desktop size viewport, body {font-size: 4rem} = text overlap, no wrapping and horizontal scroll.

https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G146

The basic principles of liquid layouts are to:

Define the size of layout regions using units that will cause the region to scale relative to text, so they enlarge or shrink as text is enlarged or shrunk;

Position the layout regions as a row of adjacent floating boxes, which wrap to new rows as needed in much the same way as words in a paragraph wrap.

Copied from original issue: w3c/wcag21#845

[alastc]

Took me a minute, but I see what you mean.

I think it would be best to scope this (i.e. change the text) to be liquid to the window size, and just have text wrap within the boxes as usual.

I think the test procedure also needs updating, it will provide different results in different user-agents.

[jake-abma]

great you got it, would be nice to see a working / live example also, good for testing and makes it much more alive.