fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Improve printer-friendliness

Browse source 
Make max line widths only apply to the "screen" media type.
This commit is contained in:
Rohan Kumar 2022-03-27 17:21:13 -07:00
parent cb0e8a4be9
commit b0d3189c84
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 58 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/css/main.css
View file

@ -33,19 +33,24 @@ html {
* on serif being the default?? */
font: 100%/1.5 sans-serif;
/* WCAG recommends a max line width. Not everyone can resize the
* viewport. TODO: see if this should be reduced.
* Aligning to the center with space on both sides prevents accidental
/* Aligning to the center with space on both sides prevents accidental
* link activation on mobile devices. */
margin: auto;
}
/* WCAG recommends a max line width. Not everyone can resize the
* viewport.
* This should not take effect on printouts, to save paper. */
@media screen {
html {
max-width: 45em;
padding: 0 3%;
}
.e-content {
max-width: 38em;
padding: 0;
margin: auto;
max-width: 38em;
}
}
/* narrow screens: reduce margin for blockquotes a lot, using
@ -62,8 +67,8 @@ figure {
}
/* Mobile optimization: nav links are tappable with fat fingers */
.unstyled-list li,
nav li {
nav li,
.unstyled-list li {
margin-bottom: 0.5em;
}

16
content/posts/website-best-practices.gmi
View file

@ -387,6 +387,22 @@ Some of my links display long link-text; short line lengths can break these link
I also ensured that my site works very well with CSS overrides, window-resizing, zoom levels past 200%, and most "reading mode" implementations. This should help accommodate a wide range of line-length preferences while still looking accessible enough by default.
When setting max line lengths, use a CSS media query to ensure that printed versions of a page use the full page width. This should save some paper. I opted to wrap all max-width rules in a media query to ensure that they only get called for the "screen" media type:
```
@media screen {
html {
max-width: 45em;
padding: 0 3%;
}
.e-content {
margin: auto;
max-width: 38em;
}
}
```
## Narrow viewports
A single element wider than the viewport will trigger horizontal scrolling for the entire page. This is especially problematic for long pages that already require excessive vertical scrolling.

25
content/posts/website-best-practices.md
View file

@ -340,6 +340,29 @@ Some of my links display long link-text; short line lengths can break these link
I also ensured that my site works very well with CSS overrides, window-resizing, zoom levels past 200%, and most "reading mode" implementations. This should help accommodate a wide range of line-length preferences while still looking accessible enough by default.
When setting max line lengths, use a CSS media query to ensure that printed versions of a page use the full page width. This should save some paper.
<figure>
<figcaption>
I opted to wrap all max-width rules in a media query to ensure that they only get called for the `screen` media type:
</figcaption>
```
@media screen {
html {
max-width: 45em;
padding: 0 3%;
}
.e-content {
margin: auto;
max-width: 38em;
}
}
```
</figure>
Narrow viewports
----------------
@ -593,7 +616,7 @@ One resource I found useful (that eventually featured this article!) was the "Yo
If you've got some time on your hands, I _highly_ recommend reading the <cite>[Web Content Accessibility Guidelines (WCAG)&nbsp;2.2](https://www.w3.org/TR/WCAG22/)</cite>. The WCAG 2 standard is technology-neutral, so it doesn't contain Web-specific advice. For that, check the <cite>[How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG22/quickref)</cite>. It combines the WCAG with its supplementary [list of techniques](https://www.w3.org/WAI/WCAG22/Techniques/).
The WCAG are an excellent starting point for learning about accessibility, but make for a poor stopping point. One of my favorite resources for learning about what the WCAG *doesn't* cover is [Axess Lab](https://axesslab.com/articles/).
The WCAG are an excellent starting point for learning about accessibility, but make for a poor stopping point. One of my favorite resources for learning about what the WCAG _doesn't_ cover is [Axess Lab](https://axesslab.com/articles/).
[^1]: Many addons function by injecting content into pages; this significantly weakens many aspects of the browser security model (e.g. site and origin isolation) and should be avoided if at all possible. On sensitive pages with content such as public key fingerprints, I recommend setting a blank `sandbox` directive even if it means breaking these addons.