mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Improve code blocks
- Support defining text in a codeblock that can be translated - Shrink some blocks to prevent page breaks on print
This commit is contained in:
parent
fa10af4051
commit
371253c2dc
3 changed files with 18 additions and 21 deletions
|
@ -516,8 +516,7 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
|
||||||
<article aria-label="comic, caption, and transcript">
|
<article aria-label="comic, caption, and transcript">
|
||||||
<h4>Infinite scrolling</h4>
|
<h4>Infinite scrolling</h4>
|
||||||
<figure>
|
<figure>
|
||||||
<img
|
<img src="SRC"
|
||||||
src="SRC"
|
|
||||||
aria-describedby="transcript-xkcd-1309"
|
aria-describedby="transcript-xkcd-1309"
|
||||||
alt="Comic: if books had infinite-scroll, we'd have to
|
alt="Comic: if books had infinite-scroll, we'd have to
|
||||||
turn pages carefully or risk losing the page.">
|
turn pages carefully or risk losing the page.">
|
||||||
|
@ -1164,20 +1163,18 @@ Finally, it's important to distinguish <kbd> from <code>, <samp>, and regular bo
|
||||||
|
|
||||||
Here's how I distinguish <code> and <samp>, <pre>, and <kbd> from each other and from body text.
|
Here's how I distinguish <code> and <samp>, <pre>, and <kbd> from each other and from body text.
|
||||||
```
|
```
|
||||||
code,
|
code, kbd, samp {
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace;
|
font-family: monospace, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
:not(pre) > code {
|
:not(pre) > code, :not(pre) > samp {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* A black border is too harsh. */
|
/* Dark borders in text are too harsh */
|
||||||
:not(pre) > code {
|
:not(pre) > code, :not(pre) > samp {
|
||||||
border-color: #aaa;
|
border-color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
|
|
|
@ -563,8 +563,7 @@ An image, alt-text, figure caption, and transcript combine to form a complex rel
|
||||||
<article aria-label="comic, caption, and transcript">
|
<article aria-label="comic, caption, and transcript">
|
||||||
<h4>Infinite scrolling</h4>
|
<h4>Infinite scrolling</h4>
|
||||||
<figure>
|
<figure>
|
||||||
<img
|
<img src="SRC"
|
||||||
src="SRC"
|
|
||||||
aria-describedby="transcript-xkcd-1309"
|
aria-describedby="transcript-xkcd-1309"
|
||||||
alt="Comic: infinite-scrolling books require
|
alt="Comic: infinite-scrolling books require
|
||||||
careful page-turns to avoid losing the page.">
|
careful page-turns to avoid losing the page.">
|
||||||
|
@ -990,7 +989,7 @@ Another example: outside the Web, I prefer indenting code with tabs instead of s
|
||||||
Small phones typically support display rotation. When phones switch to landscape-mode, vertical space becomes precious. Fixed elements (e.g. dickbars) become a major usability hazard. Ironically, the WCAG's own interactive Techniques reference is a perfect example of how fixed elements impact usability on short screens.
|
Small phones typically support display rotation. When phones switch to landscape-mode, vertical space becomes precious. Fixed elements (e.g. dickbars) become a major usability hazard. Ironically, the WCAG's own interactive Techniques reference is a perfect example of how fixed elements impact usability on short screens.
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.75 >}}
|
{{< picture name="wcag_quickref" alt="Website with banner covering top half of screen." sf=1.5 >}}
|
||||||
<figcaption>
|
<figcaption>
|
||||||
|
|
||||||
When filtering criteria on [the Quickref Reference page](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_customize&showtechniques=134%2C124&levels=a&technologies=js%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl), a dickbar lists active filters. I increased the zoom level; you may have to add more filters to fill the screen with a smaller font.
|
When filtering criteria on [the Quickref Reference page](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_customize&showtechniques=134%2C124&levels=a&technologies=js%2Cserver%2Csmil%2Cpdf%2Cflash%2Csl), a dickbar lists active filters. I increased the zoom level; you may have to add more filters to fill the screen with a smaller font.
|
||||||
|
@ -1125,21 +1124,19 @@ Finally, it's important to distinguish `<kbd>` from `<code>`, `<samp>`, and regu
|
||||||
|
|
||||||
{{< codecaption lang="CSS" >}} How I distinguish `<code>` and `<samp>`, `<pre>`, and `<kbd>` from each other and from body text. {{< /codecaption >}}
|
{{< codecaption lang="CSS" >}} How I distinguish `<code>` and `<samp>`, `<pre>`, and `<kbd>` from each other and from body text. {{< /codecaption >}}
|
||||||
|
|
||||||
```figure
|
```figure {trans1="Dark borders in text are harsh",str1="code",str2="kbd",str3="samp",str4="pre"}
|
||||||
code,
|
code, kbd, samp {
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace;
|
font-family: monospace, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
:not(pre) > code {
|
:not(pre) > code, :not(pre) > samp {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* A black border is too harsh. */
|
/* Dark borders in text are harsh */
|
||||||
:not(pre) > code {
|
:not(pre) > code, :not(pre) > samp {
|
||||||
border-color: #aaa;
|
border-color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
|
|
|
@ -6,7 +6,10 @@
|
||||||
{{- $after := printf `<var translate="yes">%s</var>` $v -}}
|
{{- $after := printf `<var translate="yes">%s</var>` $v -}}
|
||||||
{{- $contents = $contents | replaceRE $v $after -}}
|
{{- $contents = $contents | replaceRE $v $after -}}
|
||||||
{{- else if strings.HasPrefix $k "str" -}}
|
{{- else if strings.HasPrefix $k "str" -}}
|
||||||
{{- $after := printf `<strong translate="yes">%s</strong>` $v -}}
|
{{- $after := printf `<strong>%s</strong>` $v -}}
|
||||||
|
{{- $contents = $contents | replaceRE $v $after -}}
|
||||||
|
{{- else if strings.HasPrefix $k "trans" -}}
|
||||||
|
{{- $after := printf `<span translate="yes">%s</span>` $v -}}
|
||||||
{{- $contents = $contents | replaceRE $v $after -}}
|
{{- $contents = $contents | replaceRE $v $after -}}
|
||||||
{{- else if and (eq $k "samp")}}
|
{{- else if and (eq $k "samp")}}
|
||||||
{{- $samp = $v -}}
|
{{- $samp = $v -}}
|
||||||
|
|
Loading…
Reference in a new issue