We use a tool called prettier to format our code blocks. This sets a certain line length which is longer than the maximum line length of code blocks on the WAI website. Because of that we get odd wrapping of code, which is especially notable on examples that have longer text sections. Here's an example:
https://www.w3.org/WAI/standards-guidelines/act/rules/2eb176/proposed/#failed-example-2
We could adjust line wrapping to match what's the maximum width supported on the WAI website. That would improve this on wider screens. That makes line wrapping better for most people, but then on smaller / magnified screens the problem isn't solved. For that the only thing I can think of is to actually load a code formatter into the page and adjust spacing dynamically. That's not ideal... and perhaps there are better ways to solve this that can do this with CSS?
We use a tool called prettier to format our code blocks. This sets a certain line length which is longer than the maximum line length of code blocks on the WAI website. Because of that we get odd wrapping of code, which is especially notable on examples that have longer text sections. Here's an example:
https://www.w3.org/WAI/standards-guidelines/act/rules/2eb176/proposed/#failed-example-2
We could adjust line wrapping to match what's the maximum width supported on the WAI website. That would improve this on wider screens. That makes line wrapping better for most people, but then on smaller / magnified screens the problem isn't solved. For that the only thing I can think of is to actually load a code formatter into the page and adjust spacing dynamically. That's not ideal... and perhaps there are better ways to solve this that can do this with CSS?