Line wrapping in examples

[mattgarrish]

Line wrapping in examples

[sidvishnoi]

I agree this should be part of default styling so all specs benefit from it. So this needs to be discussed in tr-design. I think we also need to reduce some margins and paddings on small screens and high zoom values so more text can be shown in a single line.

For reference: Reflow in WCAG 2.1

[marcoscaceres]

Transferred to tr-design repo...

[fantasai]

The problem with making this the default is that sometimes line breaks are semantically important to the example. So the stylesheets apply overflow: auto to allow overflowing text to be seen, but they don't actually allow wrapping because that could distort the example.

Individual specs can add rules to enable wrapping, or we could add a pre.wrap { overflow-wrap: break-word } rule to base.css to make it easier to enable wrapping; but I wouldn't want to enable it by default on all pre elements because that can break some specs.

[plehegar]

+1 to @fantasai. In addition, this would be a breaking change if we were modifying the default.

If we had a pre.wrap CSS class, would this be of enough interest? Neither Respec nor Bikeshed contain such a style rule so far, which tells me this isn't used significantly.

[mattgarrish]

If we had a pre.wrap CSS class, would this be of enough interest?

As an individual rule it's a bit pointless. I don't want to add it to the hundreds of examples across the specs I work on, and have to keep remembering to add it on every time we add a new one.

Could you do something like a global body.example-wrap class, so that all pre tags in the body get wrapped?

That would be better than having to inline a rule manually, and would also presumably allow it to be documented so that others can be made aware of this issue.