Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabling code-examples to reflow #423

Closed
alastc opened this issue Jul 5, 2018 · 6 comments
Closed

Enabling code-examples to reflow #423

alastc opened this issue Jul 5, 2018 · 6 comments
Assignees

Comments

@alastc
Copy link
Contributor

alastc commented Jul 5, 2018

There's an issue in current technique documents where the code examples (in a pre) do not reflow in smaller windows or when zoomed in.

The solution should be simple, where the style is given this:

pre {
    white-space: pre-wrap;
}

Pre-wrap just means it acts like pre by default (with enough width), but does allow the lines to wrap if there is not enough space.

However, I think needs to be applied to base.css (after line 480), or somewhere that is below that in the cascade.

This issue was originally raised by @lauracarlson in #387 but might be moved to another repo 'upstream' for the general standards documentation.

@michael-n-cooper
Copy link
Member

It might be possible to make the fix in css/additional.css which is, or should be, imported into all our publications.

If the cascade makes it not work, even with !important, it might require a pull request in https://github.com/w3c/tr-design/. But it could be a long while before that shows up in actual publications.

@alastc
Copy link
Contributor Author

alastc commented Oct 5, 2018

I've opened an issue there, will see how it goes.

@alastc
Copy link
Contributor Author

alastc commented Jan 29, 2019

Next step: add it to the local CSS for WCAG's techniques/understanding docs.

@fstrr
Copy link
Contributor

fstrr commented May 10, 2022

This doesn't appear to have been implemented. I did check via experimenting in dev tools, and adding white-space:pre-wrap to a div.code pre element on line 233 in additional.css worked on the ARIA1, ARIA5, and ARIA 7 Techniques:

screenshot of dev tools with additional.css selected and edited to include the white-space rule.

I don't now how I would build the site locally to do a more-thorough test, but that should happen to do a more-thorough set of testing.

@alastc
Copy link
Contributor Author

alastc commented May 11, 2022

@fstrr I think this stalled because the new design would (should) sort it out. (Same for anything under the "design & layout" tag.)

I'll check with @michael-n-cooper about when that's rolling out.

@michael-n-cooper michael-n-cooper self-assigned this Jun 23, 2022
@fstrr
Copy link
Contributor

fstrr commented Mar 26, 2024

Closing this as it's not an issue any more.

@fstrr fstrr closed this as completed Mar 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants