1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 12:52:10 +00:00

Compare commits

...

4 commits

Author SHA1 Message Date
Rohan Kumar
8ba79ba769
Update Weasyprint compatibility
Reflects recent changes to styling of <details>.
2024-05-04 17:41:11 -04:00
Rohan Kumar
549c6f4c87
Let's all love Lain 2024-05-04 17:40:55 -04:00
Rohan Kumar
1d4797753f
compatibility statement: keep up with browser dev
Some browsers have since advanced a bit. Update the compatibility
statement to keep up with them.
2024-05-04 16:49:18 -04:00
Rohan Kumar
1d44b76dc1
Stylesheet improvements for print
- Switch references to "1px" to "thin".
- Update docs to be clearer
- Put a border around <details> and comment why.
2024-05-04 16:40:33 -04:00
4 changed files with 58 additions and 15 deletions

View file

@ -1,7 +1,7 @@
/* CSS that adds the bare minimum for a simple, accessible, /* CSS that adds the bare minimum for a simple, accessible,
* touch-friendly layout. * touch-friendly layout compatible with as many UAs as possible.
* Nothing here exists purely for cosmetics; everything addresses a * Nothing here exists purely for cosmetics; everything addresses a
* specific a11y, compatibility, or critical * specific accessibility, compatibility, or critical
* usability need. * usability need.
* *
* Three exceptions: * Three exceptions:
@ -36,9 +36,9 @@
* years. * years.
* *
* To keep myself from caring about minute details, I limited myself to * To keep myself from caring about minute details, I limited myself to
* only defining spacing in increments of .25em. Pixels are 1px or * only defining spacing in increments of .25em. Pixels are multiples of
* multiples of 3px. This also improves compression. No more "finding * 3px. This also improves compression.
* the perfect value". * No more "finding the perfect value".
* *
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet * I cite WCAG 2.2 success criteria with "SC". I also tried to meet
* the Google a11y requirement of 48px tap targets separated by atl * the Google a11y requirement of 48px tap targets separated by atl
@ -449,7 +449,10 @@ h1 {
body { body {
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
padding: 0 8px; /* Use an absolute unit for side margins so they don't increase with zoom.
* I computed this based on the thickness I saw in scrollbars and
* bezels on some watches. */
padding: 0 6px;
} }
li > a, li > a,
@ -564,20 +567,51 @@ img,
mark, /* borders provide a distinguishing factor besides color */ mark, /* borders provide a distinguishing factor besides color */
pre, pre,
summary { summary {
border: 1px solid; border: thin solid;
} }
/* Putting a border around <details> makes summaries and
* the toggled details linked together as a sort of non-semantic
* section. I did this because in some situations (such as print layouts
* or PDF generators), <summary> receives no styling; it looks like
* ordinary text! There's no indication that it represents a toggle. Of
* course, you can't actually toggle things on a printed page, so I
* understand why they had to do this. Still, I think it's necessary to
* provide an indicator that you're looking at a section that was
* toggled somehow. Assistive technologies expose the button semantics
* of the <summary> and read its contents (which on seirdy.one start
* with the word "toggle"; interactive mouse/keyboard users can click it
* and see the list-style-type; print users should also have some
* indication.
*
* We still have more work to do, though. The contents of <details> are
* smooshed up against the border, so introduce some padding. This
* padding should apply to all top-level children of `details` *except*
* the `summary`, since we don't want a double-border.
*
* By applying this padding, we also happen to ensure that `details`
* children never protrude outside the `details` container. We can then
* apply some CSS containment for free without consequences. */
/* A black border is too harsh; the extra visual noise is distracting /* A black border is too harsh; the extra visual noise is distracting
* to users with eye-tracking or ADHD. Only special items like headings * to users with eye-tracking or ADHD. Only special items like headings
* should draw gaze. */ * should draw gaze.
*
* We also need padding around inline code snippets so the border
* doesn't touch the letters and screw up readability. */
details,
:not(pre) > code, :not(pre) > code,
:not(pre) > samp { :not(pre) > samp {
border: 1px solid #999; border: thin solid #999;
/* borders shouldn't touch text */ /* borders shouldn't touch text */
padding: 0 .25em; padding: 0 .25em;
} }
summary {
margin: 0 -0.25em;
}
/* center standalone images; same justification as /* center standalone images; same justification as
* for centering the body contents. Also makes images easier to see * for centering the body contents. Also makes images easier to see
* for people holding a device with one hand. */ * for people holding a device with one hand. */
@ -675,4 +709,7 @@ form :focus {
/* Todo: /* Todo:
* - Wait till Webkit fixes its broken-ass default dark stylesheet * - Wait till Webkit fixes its broken-ass default dark stylesheet
* then consider trimming the dark stylesheet I provide. * then consider trimming the dark stylesheet I provide.
* (UPDATE: they did! now I'll wait maybe three years for it to roll
* out as much as possible before removing my dark styles or
* relegating them to an optional stylesheet.)
* */ * */

BIN
assets/p/b/lain.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -99,7 +99,7 @@ Sites that link back to me:
<a href="https://daudix.codeberg.page/about/">{{<picture name="b/daudix" alt="Daudix." width="162" height="62" class="pix">}}</a> <a href="https://daudix.codeberg.page/about/">{{<picture name="b/daudix" alt="Daudix." width="162" height="62" class="pix">}}</a>
<a href="https://dj-chase.com/">{{<picture name="b/dj-chase" alt="DJ Chase." width="162" height="62" class="pix">}}</a> <a href="https://dj-chase.com/">{{<picture name="b/dj-chase" alt="DJ Chase." width="162" height="62" class="pix">}}</a>
### Other ### Other cool sites
<a href="https://keithhacks.cyou/">{{<picture name="b/keith" alt="the word “keith” after a tilde and a bone, with a rainbow border." width="162" height="62" class="pix">}}</a> <a href="https://keithhacks.cyou/">{{<picture name="b/keith" alt="the word “keith” after a tilde and a bone, with a rainbow border." width="162" height="62" class="pix">}}</a>
<a href="https://astrid.tech/">{{<picture name="b/astriddottech" alt="astrid dot tech in glitchy distorted letters." width="162" height="62" class="pix">}}</a> <a href="https://astrid.tech/">{{<picture name="b/astriddottech" alt="astrid dot tech in glitchy distorted letters." width="162" height="62" class="pix">}}</a>
@ -115,5 +115,6 @@ The Yesterweb is winding down its social activity after admin burnout, but it re
## Other ## Other
{{<picture name="b/lain" alt="Close-up of Lain Iwakuras eyes with a static filter." width="162" height="62" class="pix">}}
{{<picture name="b/graphicdesign" alt="The words “graphic design is my passion” next to a bad drawing of a frog. Sarcasm implied." width="162" height="62" class="pix">}} {{<picture name="b/graphicdesign" alt="The words “graphic design is my passion” next to a bad drawing of a frog. Sarcasm implied." width="162" height="62" class="pix">}}
{{<picture name="b/ilovehorror" alt="I heart horror." width="162" height="62" class="pix">}} {{<picture name="b/ilovehorror" alt="I heart horror." width="162" height="62" class="pix">}}

View file

@ -100,7 +100,7 @@ Mainstream engine forks
: Pale Moon and recent versions of K-Meleon use Goanna, a single-process fork of Firefox's Gecko engine. Ultralight is a proprietary, source-available fork of WebKit focused on lightweight embedded webviews. My site works in these engines without any noticeable issues. : Pale Moon and recent versions of K-Meleon use Goanna, a single-process fork of Firefox's Gecko engine. Ultralight is a proprietary, source-available fork of WebKit focused on lightweight embedded webviews. My site works in these engines without any noticeable issues.
Alternative engines Alternative engines
: I test compatibility with current alternative engines: the SerenityOS browser, Servo, NetSurf, Kristall, and litehtml. I have excellent compatibility with litehtml and Servo. The site is usable in NetSurf, and the SerenityOS browser. Servo is the only engine in this category with support for `<details>`. ~~[The SerenityOS browser lacks ECDSA certificate support](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine.~~ <ins itemprop="correction" itemscope="" itemtype="https://schema.org/CorrectionComment" cite="https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9">Update <time itemprop="datePublished">2024-01-30</time>: <span itemprop="text">[SerenityOS LibTLS merged support for these ciphers in October 2023](https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9), resolving this incompatibility</span></ins>. The SerenityOS browser also has issues displaying my inline SVG avatar. : I test compatibility with current alternative engines: Ladybird (the SerenityOS browser), Servo, NetSurf, Kristall, and litehtml. I have excellent compatibility with litehtml, Ladybird, and Servo. The site is usable in NetSurf. litehtml and NetSurf do not support `<details>`, but remain usable. ~~[The SerenityOS browser lacks ECDSA certificate support](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine.~~ <ins itemprop="correction" itemscope="" itemtype="https://schema.org/CorrectionComment" cite="https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9">Update <time itemprop="datePublished">2024-01-30</time>: <span itemprop="text">[SerenityOS LibTLS merged support for these ciphers in October 2023](https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9), resolving this incompatibility</span></ins>.
Textual browsers Textual browsers
: The site works well with textual browsers. All features except `<details>` work in Lynx and Links2. I include [felinks (an ELinks fork)](https://github.com/rkd77/elinks), edbrowse, and w3m in my tests. [w3m doesn't support soft hyphens](https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=830173), but the site is still otherwise usable in it. I support these engines by making CSS a strictly-optional progressive enhancement and by using semantic markup. I test with Edbrowse less often. No textual browser supports `<details>`. : The site works well with textual browsers. All features except `<details>` work in Lynx and Links2. I include [felinks (an ELinks fork)](https://github.com/rkd77/elinks), edbrowse, and w3m in my tests. [w3m doesn't support soft hyphens](https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=830173), but the site is still otherwise usable in it. I support these engines by making CSS a strictly-optional progressive enhancement and by using semantic markup. I test with Edbrowse less often. No textual browser supports `<details>`.
@ -108,21 +108,26 @@ Textual browsers
Abandoned engines Abandoned engines
: I occasionally test abandoned engines, sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Dillo,[^1] Internet Explorer[^2] (with and without compatibility mode), Netscape Navigator, old Presto-based Opera versions,[^3] and outdated versions of current browsers. No abandoned engine supports `<details>`. I use Linux, but testing in Internet Explorer depends on my access to a Windows machine. Besides the `<details>` issues, the site works well in Internet Explorer 11 and Opera Presto. The site has layout issues but remains usable in Tkhtml, KHTML, and Netscape. : I occasionally test abandoned engines, sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Dillo,[^1] Internet Explorer[^2] (with and without compatibility mode), Netscape Navigator, old Presto-based Opera versions,[^3] and outdated versions of current browsers. No abandoned engine supports `<details>`. I use Linux, but testing in Internet Explorer depends on my access to a Windows machine. Besides the `<details>` issues, the site works well in Internet Explorer 11 and Opera Presto. The site has layout issues but remains usable in Tkhtml, KHTML, and Netscape.
Others
: WeasyPrint uses a custom browser engine optimized for print. I test a small selection of representative pages with it. Should I ever stumble across a VR headset, I'll be sure to test Wolvic too.
I support compatibility to the following degrees: I support compatibility to the following degrees:
- Works without major issues in mainstream engines, the Tor browser, Goanna, and Ultralight. - Works without major issues in mainstream engines, the Tor browser's "Safest" mode (assuming use of the Onion service which does not use SVGs), Ladybird, Goanna, Ultralight, and WeasyPrint.[^0]
- Fully operable in textual browsers, litehtml, and NetSurf. Some issues (e.g. missing `<details>`) might make the experience unpleasant, but all major functions work. - Fully operable in textual browsers, litehtml, and NetSurf. Some issues (e.g. missing `<details>`) might make the experience unpleasant, but all major functions work.
- Basic features in abandoned engines, Dillo, the SerenityOS browser. Some ancillary features may not work (e.g. forms for Webmentions and search), but users can browse and read. - Basic features in abandoned engines and Dillo. Some ancillary features may not work (e.g. forms for Webmentions and search), but users can browse and read.
[^0]: WeasyPrint doesn't support `details`, but I don't fully count this against my site's support for its engine because WeasyPrint targets non-interactive print media. Instead, I just ensure that the site makes sense in WeasyPrint without special `details` styling. Since my stylesheets define a border around `summary` and `details` elements, and since I they always start with the word "toggle", they mostly make sense even when not rendered with special builtin styles.
Some engines I have not yet tested, but hope to try in the future: Some engines I have not yet tested, but hope to try in the future:
- [Flow Browser](https://www.ekioh.com/flow-browser/) - [Flow Browser](https://www.ekioh.com/flow-browser/)
- [gngr](https://gngr.info/) - [gngr](https://gngr.info/)
- [WeasyPrint](https://weasyprint.org/)
- [Netzhaut](https://web.archive.org/web/20230405031300/http://netzhaut.dev/) - [Netzhaut](https://web.archive.org/web/20230405031300/http://netzhaut.dev/)
- [Kozmonaut](https://github.com/twilco/kosmonaut) - [Kozmonaut](https://github.com/twilco/kosmonaut)
- [Moon](https://github.com/ZeroX-DG/moon) - [Moon](https://github.com/ZeroX-DG/moon)
- [hastur](https://github.com/robinlinden/hastur) - [hastur](https://github.com/robinlinden/hastur)
- [Wolvic](https://wolvic.org/en/)
## Machine-friendliness ## Machine-friendliness
@ -224,7 +229,7 @@ I'm not opposed to these features, but I probably won't implement support for th
This site is **privacy-respecting.** Its <abbr title="Content Security Policy">CSP</abbr> blocks all scripts, third-parties, and other problematic features. For details on this site's privacy, [read the privacy policy](../privacy/). This site is **privacy-respecting.** Its <abbr title="Content Security Policy">CSP</abbr> blocks all scripts, third-parties, and other problematic features. For details on this site's privacy, [read the privacy policy](../privacy/).
[^1]: Although no official announcement of Dillo's demise exists, the browser's development halted years ago. The Dillo website's domain name expired, so [I mirrored the Dillo repository]({{<relref "/notes/dillo-repository-mirror.md">}}). [^1]: Although no official announcement of Dillo's demise exists, the browser's development halted years ago. The Dillo website's domain name expired, so [I mirrored the Dillo repository]({{<relref "/notes/dillo-repository-mirror.md">}}). The project has since been picked up by a different team that does not use the original Dillo domain, and [Dillo work continues on GitHub](https://dillo-browser.github.io/).
[^2]: [Internet Explorer's engine isn't abandoned]({{<relref "internet-explorer-is-almost-gone.md">}}). Microsoft discontinued the consumer version, but supports the browser for enterprise users. I used to have access to the latter; I now test with "Internet Explorer Mode" in Edge when I can access a Windows machine. [^2]: [Internet Explorer's engine isn't abandoned]({{<relref "internet-explorer-is-almost-gone.md">}}). Microsoft discontinued the consumer version, but supports the browser for enterprise users. I used to have access to the latter; I now test with "Internet Explorer Mode" in Edge when I can access a Windows machine.