ensure diagrams render properly without JavaScript

soc · soc · commit 3f65069c0b43 · 2025-12-20T22:45:41.000+01:00
diff --git a/_hardware/usb-standard.md b/_hardware/usb-standard.md
@@ -50,13 +50,13 @@ reading the rest of the keyboard keys (second mention of the keyboard usage page
 
 Given this descriptor, the payload sent from the keyboard to the computer looks like this:
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────┬──────╯ ╰──────┬──────╯ ╰──────┬──────╯ ╰──────┬──────╯ ╰──────┬──────╯ ╰──────┬──────╯ ╰──────┬──────╯ ╰──────┬───────┘
        Modifiers      Reserved       Scancode 1      Scancode 2      Scancode 3      Scancode 4      Scancode 5      Scancode 6
-</div>
+</pre>
 
 This means that each report can report the scancodes of at most 6 simultanouesly pressed keys,
 a limitation often described with the term _6KRO_ (six key roll-over).
@@ -65,7 +65,7 @@ Various approaches have been tried to work around this limitation in the past, b
 
 ### Universal Report Format for Keyboards
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+┅
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+┅
@@ -86,11 +86,11 @@ Various approaches have been tried to work around this limitation in the past, b
 ┅+---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  ┈───────┬──────────────────────╯ ╰──────────────────────┬──────────────────────╯ ╰──────────────────────┬──────────────────────╯
   Universal code 8                                Universal code 9                                Universal code 10
-</div>
+</pre>
 
 #### Universal Code – Unicode codepoints
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+
  |0┊ ┊ ┊u┊u┊u┊u┊u|u┊u┊u┊u┊u┊u┊u┊u|u┊u┊u┊u┊u┊u┊u┊u|
  +---------------+---------------+---------------+
@@ -120,13 +120,13 @@ Various approaches have been tried to work around this limitation in the past, b
  +------┅
    ╰─┬─╯
  Multiple codepoints – end
-</div>
+</pre>
 
 
 
 #### Universal Code – Legacy Usage Pages
 
-<div class="diagram">
+<pre class="diagram">
 +---------------+---------------+---------------+
 |1┊s┊s┊s┊s┊s┊s┊s|p┊p┊p┊p┊p┊p┊p┊p|p┊p┊p┊p┊p┊p┊p┊p|
 +---------------+---------------+---------------+
@@ -140,4 +140,4 @@ Legacy Selector
    ╰─────┬─────╯ ╰──────────────┬──────────────╯
 Keyboard Page 0x07    Usage ID 0x04 (letter "A")
 
-</div>
+</pre>
diff --git a/_interfaces/x86-prefixes-and-escape-opcodes-flowchart.md b/_interfaces/x86-prefixes-and-escape-opcodes-flowchart.md
@@ -5,7 +5,7 @@ update: 2025-04-27
 markdeep: true
 ---
 
-<div class="diagram">
+<pre class="diagram">
  start here
       |
       v                                                          ╔══════════════════════════════════════════════════╗
@@ -51,9 +51,9 @@ markdeep: true
                                                               |  ╔══════════════════════════════════════════════════╗
                                                               +->║ AVX512-Float16 instructions            (map 5/6) ║
                                                                  ╚══════════════════════════════════════════════════╝
-</div>
+</pre>
 
-<div class="diagram">
+<pre class="diagram">
 ┏━┯━┯━┯━┯━┯━┯━┯━┓                                                    ┏━┯━┯━┯━┯━┯━┯━┯━┳━┯━┯━┯━┯━┯━┯━┯━┓
 ┃0 1 0 0 W R X B┃                                                    ┃1 1 0 1 0 1 0 1┃M R X B W R X B┃
 ┗━┷━┷━┷━┷━┷━┷━┷━┛                                                    ┗━┷━┷━┷━┷━┷━┷━┷━┻━┷━┷━┷━┷━┷━┷━┷━┛
@@ -95,4 +95,4 @@ EVEX (4-byte prefix)                    AVX-512 (2013/2017)                - let
 - Ŀ selects vector length (512bit) or rounding control mode (with L)       
 - L selects vector length (256bit)
 - b encodes source broadcast or rounding control (with Ŀ and L) or exception suppression
-</div>
+</pre>
diff --git a/_languages/drop-break-and-continue.md b/_languages/drop-break-and-continue.md
@@ -28,7 +28,7 @@ Of those 90 loops with `break`s, 80 are easily convertible to equivalent code no
 
 Of the 10 loops with `continue`s maybe 5 are easily convertible.
 
-<div class="diagram">
+<pre class="diagram">
 .------------------------------------------------.
 | all loops                                      |
 |                                                |
@@ -38,7 +38,7 @@ Of the 10 loops with `continue`s maybe 5 are easily convertible.
 |                                            +---+
 |                     loops with continue--->|   |
 '--------------------------------------------+---'
-</div>
+</pre>
 
 This means that out of 1000 loops, supporting `break` and `continue` focuses on making 1.5% of the loops more convenient,
 to the detriment of the other 98.5% of the loops.
diff --git a/_runtimes/header-compression.md b/_runtimes/header-compression.md
@@ -11,14 +11,14 @@ Consider a reference-based class definition `class Cat(name: String, lives: Int6
 
 Then an instance `Cat("Colin", 9)` may be represented in memory like this:
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+
  | header        | reference     |             9 |
  +---------------+---------------+---------------+
                          |
                          v
                       "Colin"
-</div>
+</pre>
 
 - The header needs to include information on the instance's type for dynamic dispatch and garbage-collection purposes.
 - The runtime may need a number of bits for miscellaneous uses.
@@ -40,18 +40,18 @@ Schemes to decrease header size often trade in a more compressed representation
 
 ##### 4-byte instance header
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+
   ╰──────────────────────┬──────────────────────╯ ╰──────┬──────╯
      24 bits: vtable/type/class pointer                  8 bits: other uses
      64 byte granularity, 1 GiB address space (type 7)¹                                                                          .
-</div>
+</pre>
 
 ##### 8-byte instance header, with space for a forwarding pointer
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
@@ -64,7 +64,7 @@ Schemes to decrease header size often trade in a more compressed representation
                                                                                                          - pinned bit
                                                                                                          - locked bit
                                                                                                          - forwarding (failed) bit
-</div>
+</pre>
 
 ---
 ¹: [Pointer Compression Type 7](pointer-compression#type-7-vtabletypeclass-reference-64-byte-granularity-1-gib-address-space)<br/>
diff --git a/_runtimes/pointer-compression.md b/_runtimes/pointer-compression.md
@@ -19,91 +19,91 @@ _**TL;DR:** How large is a pointer on 64-bit systems – and how small can it pr
 
 ##### type 1: normal reference, 1 byte granularity, 256 TiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬──────────────╯ ╰──────────────────────────────┬──────────────────────────────────────────────────────────────╯
       bits 63 to 48 (16 bits): unused                 bits 47 to 0 (48 bits): address
 
-</div>
+</pre>
 
 <small>→ 48 bits address, 16 "free" bits</small>
 
 ##### type 2: normal reference, 8 byte granularity, 128 TiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬────────────────╯ ╰──────────────────────────────┬──────────────────────────────────────────────────────╯ ╰─┬─╯
       bits 63 to 47 (17 bits): unused                 bits 46 to 3 (44 bits): address                 bits 2 to 0 (3 bits): unused
 
-</div>
+</pre>
 
 <small>→ 44 bits address, 20 "free" bits</small>
 
 ##### type 3: normal reference, 8 byte granularity, 8 TiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬────────────────────────╯ ╰──────────────────────┬──────────────────────────────────────────────────────╯ ╰─┬─╯
       bits 63 to 43 (21 bits): unused                 bits 42 to 3 (40 bits): address                 bits 2 to 0 (3 bits): unused
 
-</div>
+</pre>
 
 <small>→ 40 bits address, 24 "free" bits</small>
 
 ##### type 4: normal reference, 8 byte granularity, 512 GiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬────────────────────────────────╯ ╰──────────────┬──────────────────────────────────────────────────────╯ ╰─┬─╯
       bits 63 to 39 (25 bits): unused                 bits 38 to 3 (36 bits): address                 bits 2 to 0 (3 bits): unused
 
-</div>
+</pre>
 
 <small>→ 36 bits address, 28 "free" bits</small>
 
 ##### type 5: vtable/type/class reference, 128 byte granularity, 128 TiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬────────────────╯ ╰──────────────────────────────┬──────────────────────────────────────────────╯ ╰─────┬─────╯
       bits 63 to 47 (17 bits): unused                 bits 46 to 7 (40 bits): address                 bits 6 to 0 (7 bits): unused
 
-</div>
+</pre>
 
 <small>→ 40 bits address, 24 "free" bits</small>
 
 ##### type 6: vtable/type/class reference, 128 byte granularity, 512 GiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬────────────────────────────────╯ ╰──────────────┬──────────────────────────────────────────────╯ ╰─────┬─────╯
       bits 63 to 39 (25 bits): unused                 bits 38 to 7 (32 bits): address                 bits 6 to 0 (7 bits): unused
 
-</div>
+</pre>
 
 <small>→ 32 bits address, 32 "free" bits</small>
 
 ##### type 7: vtable/type/class reference, 64 byte granularity, 1 GiB address space
 
-<div class="diagram">
+<pre class="diagram">
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
  | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ | ┊ ┊ ┊ ┊ ┊ ┊ ┊ |
  +---------------+---------------+---------------+---------------+---------------+---------------+---------------+---------------+
   ╰──────────────┬──────────────────────────────────────────────────╯ ╰──────────┬──────────────────────────────────╯ ╰───┬─────╯
       bits 63 to 30 (34 bits): unused                 bits 29 to 6 (24 bits): address                 bits 5 to 0 (6 bits): unused
 
-</div>
+</pre>
 
 <small>→ 24 bits address, 40 "free" bits</small>
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
@@ -313,6 +313,9 @@ pre {
     padding-left: 0;
     border: 0;
   }
+  & .diagram {
+    font-size: 60%;
+  }
 }
 
 .obsolete {
diff --git a/_standards/base-uid.md b/_standards/base-uid.md

Original file line number	Diff line number	Diff line change
`@@ -313,6 +313,9 @@ pre {`
`313`	`313`	`padding-left: 0;`
`314`	`314`	`border: 0;`
`315`	`315`	`}`
	`316`	`+ & .diagram {`
	`317`	`+ font-size: 60%;`
	`318`	`+ }`
`316`	`319`	`}`
`317`	`320`
`318`	`321`	`.obsolete {`