Add fallbacks for system fonts to reduce layout shift.

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
Add 'needs LaTeX' meta for pages where LaTeX is needed for Bergamot
2026-01-03 18:08:15 -08:00 · 2026-01-03 16:34:22 -08:00 · 2025-04-12 17:56:03 -07:00 · 2025-04-05 19:54:25 -07:00 · 2025-03-30 23:11:35 -07:00 · 2025-03-30 22:45:24 -07:00
14 changed files with 362 additions and 242 deletions
--- a/assets/scss/fonts.scss
+++ b/assets/scss/fonts.scss
@@ -43,3 +43,23 @@
@include font-raleway(400);
@include font-raleway(700);
@include font-stixgeneral();
+
+/* Generated from chatgpt-adjust-fallback.py */
+
+@font-face {
+  font-family: "Raleway Fallback";
+  src: local("Arial");
+  size-adjust: 100.09%;
+  ascent-override: 94.00%;
+  descent-override: 23.40%;
+  line-gap-override: 0.00%;
+}
+
+@font-face {
+  font-family: "Lora Fallback";
+  src: local("Times New Roman");
+  size-adjust: 111.79%;
+  ascent-override: 100.60%;
+  descent-override: 27.40%;
+  line-gap-override: 0.00%;
+}
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -330,8 +330,7 @@ figure {
 That's because firefox reader mode doesn't play nice with them, and
 it seems to ignore all styles in <head>. Then, the inline style
 in <head> uses !important to restore the display of icons, but provides
- limited styling. Here, we finally apply the full extent of the feather
- styles.
+ limited styling. Here, we finally apply the full extent of the feather styles.
 */
 .feather {
    width: 1rem;
@@ -402,7 +401,6 @@ figure {
        }
    }

-
    a, .ongoing-placeholder {
        @include bordered-block;
        padding: 0.5em 1em 0.5em 1em;
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -9,8 +9,8 @@ $background-color-dark: #1b1d1f;
 $standard-border-width: .075rem;
 $standard-border: $standard-border-width solid $border-color;

-$font-heading: "Lora", serif;
-$font-body: "Raleway", serif;
+$font-heading: "Lora", "Lora Fallback", serif;
+$font-body: "Raleway", "Raleway Fallback", sans-serif;
 $font-code: "Inconsolata", monospace, "STIXGeneral";

 $warning-background-color: #ffee99;
@@ -23,7 +23,7 @@ $target-background-color-dark: #55511c;

 $code-color: #f0f0f0;
 $code-color-dark: lighten($background-color-dark, 10%);
-$code-token-color: black;
+$code-token-color: darken($primary-color, 25%);
 $code-token-color-dark: $primary-color;
 $code-highlight-color: #fffd99;
 $code-highlight-color-dark: #555538;
--- a/chatgpt-adjust-fallback.py
+++ b/chatgpt-adjust-fallback.py
@@ -0,0 +1,90 @@
+"""
+Generate @font-face settings to help make the fallback font look similar
+to the non-fallback font.
+
+Genererated by ChatGTP 5.2-instant. Not human-modified.
+"""
+
+from fontTools.ttLib import TTFont
+
+USE_TYPO_METRICS = 1 << 7
+
+def get_metrics(path):
+    font = TTFont(path)
+
+    head = font["head"]
+    os2 = font["OS/2"]
+    hhea = font["hhea"]
+
+    use_typo = bool(os2.fsSelection & USE_TYPO_METRICS)
+
+    if use_typo:
+        asc = os2.sTypoAscender
+        desc = os2.sTypoDescender
+        gap = os2.sTypoLineGap
+        source = "OS/2.sTypo*"
+    else:
+        asc = hhea.ascent
+        desc = -hhea.descent
+        gap = hhea.lineGap
+        source = "hhea.*"
+
+    # x-height ALWAYS comes from OS/2
+    if not hasattr(os2, "sxHeight") or os2.sxHeight <= 0:
+        raise ValueError(f"{path} has no usable sxHeight")
+
+    x_height = os2.sxHeight
+
+    print("Source", path, source)
+
+    return {
+        "unitsPerEm": head.unitsPerEm,
+        "ascender": asc,
+        "descender": desc,
+        "lineGap": gap,
+        "xHeight": x_height,
+    }
+
+def compute_overrides(target, fallback):
+    # size-adjust: match x-height
+    size_adjust = (
+        (target["xHeight"] / target["unitsPerEm"]) /
+        (fallback["xHeight"] / fallback["unitsPerEm"])
+    )
+
+    # overrides: force target vertical metrics
+    ascent_override = target["ascender"] / target["unitsPerEm"]
+    descent_override = abs(target["descender"]) / target["unitsPerEm"]
+    line_gap_override = target["lineGap"] / target["unitsPerEm"]
+
+    return {
+        "size_adjust": size_adjust * 100,
+        "ascent_override": ascent_override * 100,
+        "descent_override": descent_override * 100,
+        "line_gap_override": line_gap_override * 100,
+    }
+
+def emit_css(family_name, local_name, values):
+    return f"""
+@font-face {{
+  font-family: "{family_name}";
+  src: local("{local_name}");
+  size-adjust: {values['size_adjust']:.2f}%;
+  ascent-override: {values['ascent_override']:.2f}%;
+  descent-override: {values['descent_override']:.2f}%;
+  line-gap-override: {values['line_gap_override']:.2f}%;
+}}
+""".strip()
+
+# ---- Example usage ----
+
+target = get_metrics("static/fonts/gen/Lora-Regular.woff2")
+fallback = get_metrics("/System/Library/Fonts/Supplemental/Times New Roman.ttf")
+
+values = compute_overrides(target, fallback)
+
+print(emit_css(
+    family_name="Lora Fallback",
+    local_name="Times New Roman",
+    values=values,
+))
--- a/layouts/_default/_markup/render-blockquote.html
+++ b/layouts/_default/_markup/render-blockquote.html
@@ -0,0 +1,9 @@
+{{ if and (eq .Type "alert") (eq .AlertType "todo") -}}
+<div style="background-color: tomato; color: white; padding: 10px;">
+    <em>TODO: </em>{{- .Text | plainify -}}
+</div>
+{{- else -}}
+<blockquote {{- with .Attributes.id }} id="{{ . }}"{{ end }}>
+{{ .Text -}}
+</blockquote>
+{{- end }}
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -1,24 +1,25 @@
-{{- $scratch := newScratch -}}
+{{- $class := "" -}}
+{{- $icon := "" -}}
 {{- $absoluteDest := absLangURL .Destination -}}
 {{- $siteRootUrl := absLangURL "" -}}
 {{- $isExternal := not (hasPrefix $absoluteDest $siteRootUrl) -}}
 {{- $isSamePage := hasPrefix .Destination "#" -}}

 {{- if $isSamePage -}}
-  {{- $scratch.Set "class" "same-page-link" -}}
+  {{- $class = "same-page-link" -}}
  {{- if index (.Page.Scratch.Get "definedSections") .Destination -}}
-    {{- $scratch.Set "icon" "arrow-up" -}}
+    {{- $icon = "arrow-up" -}}
  {{- else -}}
    {{- /* Do not render "down" links because don't know how to distinguish unseen titles from paragraph links. */ -}}
-    {{- /* $scratch.Set "icon" "arrow-down" */ -}}
+    {{- /* $icon = "arrow-down" */ -}}
  {{- end -}}
 {{- else if $isExternal -}}
-  {{- $scratch.Set "class" "external-link" -}}
-  {{- $scratch.Set "icon" "external-link" -}}
+  {{- $class = "external-link" -}}
+  {{- $icon = "external-link" -}}
 {{- end -}}
 <a href="{{ .Destination | safeURL }}"
  {{- with .Title }} title="{{ . }}"{{ end -}}
-  {{- with $scratch.Get "class" -}}
+  {{- with $class -}}
    class="{{ . }}"
  {{- end -}}
  {{- if (and site.Params.externalLinksInNewTab $isExternal) -}}
@@ -26,6 +27,6 @@
  {{- end -}}
 >
  {{- with .Text | safeHTML }}{{ . }}{{ end -}}
-  {{- with $scratch.Get "icon" -}}{{- partial "icon.html" . -}}{{- end -}}
+  {{- with $icon -}}{{- partial "icon.html" . -}}{{- end -}}
 </a>
 {{- /* chomp trailing newline */ -}}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -58,6 +58,8 @@
    {{ end }}

    {{ if .Params.bergamot }}
+    <!-- Ensure later scripts keep the KaTeX CSS even if the page has no LaTeX !-->
+    <meta name="needs-latex">
    <!-- Code to support the Bergamot JS widget -->
    <script defer src="{{ .Site.Params.katexJsUrl }}" crossorigin="anonymous"></script>
    {{ $katexComponentJs := resources.Get "js/katex-component.js" | resources.Minify }}
--- a/layouts/partials/highlightgroup.html
+++ b/layouts/partials/highlightgroup.html
@@ -1,12 +1,11 @@
-{{- $scratch := newScratch -}}
-{{- $scratch.Set "highlightGroupAttrs" (printf "data-base-path=\"%s\" data-file-path=\"%v\"" .basePath .path) -}}
+{{- $highlightGroupAttrs := (printf "data-base-path=\"%s\" data-file-path=\"%v\"" .basePath .path) -}}
 {{- if (or .firstLine .lastLine) -}}
-{{- $scratch.Add "highlightGroupAttrs" (printf " data-first-line=\"%v\" data-last-line=\"%v\"" .firstLine .lastLine) -}}
+{{- $highlightGroupAttrs = add $highlightGroupAttrs (printf " data-first-line=\"%v\" data-last-line=\"%v\"" .firstLine .lastLine) -}}
 {{- end -}}
 {{- if eq (lower .language) "agda" -}}
-{{- $scratch.Add "highlightGroupAttrs" " data-agda-block" -}}
+{{- $highlightGroupAttrs = add $highlightGroupAttrs " data-agda-block" -}}
 {{- end -}}
 {{- with .offset -}}
-{{- $scratch.Add "highlightGroupAttrs" (printf " data-source-offset=\"%v\"" .) -}}
+{{- $highlightGroupAttrs = add $highlightGroupAttrs (printf " data-source-offset=\"%v\"" .) -}}
 {{- end -}}
-{{ partial "group.html" (dict "url" .url "path" .path "comment" .comment "content" (highlight .code .language .opts) "attrs" ($scratch.Get "highlightGroupAttrs")) }}
+{{ partial "group.html" (dict "url" .url "path" .path "comment" .comment "content" (highlight .code .language .opts) "attrs" $highlightGroupAttrs) }}
--- a/layouts/partials/summary.html
+++ b/layouts/partials/summary.html
@@ -0,0 +1,5 @@
+{{- if .Params.summary -}}
+{{ .Params.summary }}
+{{- else -}}
+{{ .Summary | plainify | truncate 180 }}
+{{- end -}}
--- a/layouts/shortcodes/codelines.html
+++ b/layouts/shortcodes/codelines.html
@@ -1,39 +1,38 @@
 {{- $source := (readFile (printf "code/%s" (.Get 1))) -}}
 {{- $allLines := split $source "\n" -}}
 {{- $scratch := newScratch -}}
+{{- $remLines := $allLines -}}
 {{- if not (eq (int (.Get 2)) 1) -}}
-{{- $scratch.Set "remLines" (after (sub (int (.Get 2)) 1) $allLines) -}}
-{{- else -}}
-{{- $scratch.Set "remLines" $allLines -}}
+{{- $remLines = after (sub (int (.Get 2)) 1) $allLines -}}
 {{- end -}}
-{{- $lines := first (add (sub (int (.Get 3)) (int (.Get 2))) 1) ($scratch.Get "remLines") -}}
+{{- $lines := first (add (sub (int (.Get 3)) (int (.Get 2))) 1) $remLines -}}

+{{- $opts := "" -}}
 {{- if (.Get 4) -}}
-{{- $scratch.Set "opts" (printf ",%s" (.Get 4)) -}}
-{{- else -}}
-{{- $scratch.Set "opts" "" -}}
+{{- $opts = printf ",%s" (.Get 4) -}}
 {{- end -}}

 {{- if (.Get 5) -}}
 {{- $scratch.Set "hidden" (.Get 5) -}}
 {{- end -}}

+{{- $prefixLength := "" -}}
+{{- $joinedLines := "" -}}
 {{- if or (.Page.Params.left_align_code) (.Get 6) -}}
-{{- $scratch.Set "prefixLength" -1 -}}
+{{- $prefixLength = -1 -}}
 {{- range $line := $lines -}}
 {{- $leading := sub (len $line) (len (strings.TrimLeft " " $line)) -}}
-{{- if and (ne $line "") (or (eq ($scratch.Get "prefixLength") -1) (le $leading ($scratch.Get "prefixLength"))) -}}
-{{- $scratch.Set "prefixLength" $leading -}}
+{{- if and (ne $line "") (or (eq $prefixLength -1) (le $leading $prefixLength)) -}}
+{{- $prefixLength = $leading -}}
 {{- end -}}
 {{- end -}}

-{{- $scratch.Set "joinedLines" "" -}}
 {{- range $line := $lines -}}
-{{- $scratch.Add "joinedLines" (substr $line ($scratch.Get "prefixLength")) -}}
-{{- $scratch.Add "joinedLines" "\n" -}}
+{{- $joinedLines = add $joinedLines (substr $line $prefixLength) -}}
+{{- $joinedLines = add $joinedLines "\n" -}}
 {{- end -}}
 {{- else -}}
-{{- $scratch.Set "joinedLines" (delimit $lines "\n") -}}
+{{- $joinedLines = delimit $lines "\n" -}}
 {{- end -}}

 {{- partial "geturl.html" (dict "scratch" $scratch "path" (.Get 1) "lines" (slice (.Get 2) (.Get 3))) -}}
@@ -47,12 +46,12 @@
       "basePath" ($scratch.Get "bestPath")
       "path" (.Get 1)
       "comment" ($scratch.Get "comment")
-       "code" ($scratch.Get "joinedLines")
+       "code" $joinedLines
       "firstLine" (int (.Get 2))
       "lastLine" (int (.Get 3))
       "language" (.Get 0)
-       "offset" ($scratch.Get "prefixLength")
-       "opts" (printf "linenos=table,linenostart=%d%s" (.Get 2) ($scratch.Get "opts"))
+       "offset" $prefixLength
+       "opts" (printf "linenos=table,linenostart=%d%s" (.Get 2) $opts)
 -}}
 {{- partial "highlightgroup.html" $groupconfig -}}
 {{- with ($scratch.Get "hidden") -}}
--- a/layouts/shortcodes/todo.html
+++ b/layouts/shortcodes/todo.html
@@ -1,3 +0,0 @@
-<div style="background-color: tomato; color: white; padding: 10px;">
-    <em>TODO: </em>{{- .Inner -}}
-</div>
Author	SHA1	Message	Date
Danila Fedorin	5460d759b0	Add fallbacks for system fonts to reduce layout shift. Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>	2026-01-03 18:08:15 -08:00
Danila Fedorin	54e942c85f	Add 'needs LaTeX' meta for pages where LaTeX is needed for Bergamot Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>	2026-01-03 16:34:22 -08:00
Danila Fedorin	952502e690	Re-enable syntax highlighting in light mode Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>	2025-04-12 17:56:03 -07:00
Danila Fedorin (aider)	388a4f1589	style: Fix inconsistent indentation in SCSS files for clarity	2025-04-05 19:54:25 -07:00
Danila Fedorin	806d3a318f	Switch TODO to be a quote syntax to avoid shortcodes Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>	2025-03-30 23:11:35 -07:00
Danila Fedorin	b06b695653	Use mutable variables instead of scratch where possible Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>	2025-03-30 22:45:24 -07:00
Danila Fedorin	4ff04221b0	Adjust summaries to account for Hugo breaking changes Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>	2025-03-02 18:59:45 -08:00