5 files changed, 21 insertions, 1 deletions
diff --git a/media/content/unicode-range/after.jpg b/media/content/unicode-range/after.jpg
new file mode 100644
index 0000000..40da8b2
--- /dev/null
+++ b/media/content/unicode-range/after.jpg
Binary files differdiff --git a/media/content/unicode-range/before.jpg b/media/content/unicode-range/before.jpg
new file mode 100644
index 0000000..bd8bab2
--- /dev/null
+++ b/media/content/unicode-range/before.jpg
Binary files differdiff --git a/site/unicode-range.html b/site/unicode-range.html
index 6ea1a5c..3a35877 100644
--- a/site/unicode-range.html
+++ b/site/unicode-range.html
@@ -37,6 +37,10 @@ href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88"
 target="_blank">IPAex</a> was not properly supporting glyphs used by
 Turkish, like <a href="https://en.wikipedia.org/wiki/%C4%9E"
 target="_blank">ğ</a>.</p>
+<figure>
+<img src="/media/content/unicode-range/before.jpg" alt="before" />
+<figcaption aria-hidden="true">before</figcaption>
+</figure>
 <p>To fix this i am using a property of the <code>@font-face</code> rule
 to limit custom fonts to source their glyphs from a subset of the
 unicode range and force fallback to the next font in the set.</p>
@@ -61,9 +65,13 @@ class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#c
 <span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a>        <span class="dv">Noto Sans</span><span class="op">,</span></span>
 <span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a>        <span class="dv">sans</span><span class="op">;</span></span>
 <span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
+<figure>
+<img src="/media/content/unicode-range/after.jpg" alt="after" />
+<figcaption aria-hidden="true">after</figcaption>
+</figure>
 </main>
 <footer>
-Edited on 2025-03-07 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/unicode-range.htm" target="_blank">[src]</a>
+Edited on 2025-03-10 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/unicode-range.htm" target="_blank">[src]</a>
 <a href="mailto:~robertgzr/public-inbox@lists.sr.ht">[comments]</a>
 <br>
 <b>robertgzr</b>
diff --git a/src/inc/unicode-range.htm b/src/inc/unicode-range.htm
index 778cb7c..314e82d 100644
--- a/src/inc/unicode-range.htm
+++ b/src/inc/unicode-range.htm
@@ -6,6 +6,10 @@ href="https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88"
 target="_blank">IPAex</a> was not properly supporting glyphs used by
 Turkish, like <a href="https://en.wikipedia.org/wiki/%C4%9E"
 target="_blank">ğ</a>.</p>
+<figure>
+<img src="/media/content/unicode-range/before.jpg" alt="before" />
+<figcaption aria-hidden="true">before</figcaption>
+</figure>
 <p>To fix this i am using a property of the <code>@font-face</code> rule
 to limit custom fonts to source their glyphs from a subset of the
 unicode range and force fallback to the next font in the set.</p>
@@ -30,3 +34,7 @@ class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#c
 <span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a>        <span class="dv">Noto Sans</span><span class="op">,</span></span>
 <span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a>        <span class="dv">sans</span><span class="op">;</span></span>
 <span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
+<figure>
+<img src="/media/content/unicode-range/after.jpg" alt="after" />
+<figcaption aria-hidden="true">after</figcaption>
+</figure>
diff --git a/src/inc/unicode-range.md b/src/inc/unicode-range.md
index 8c68636..fdadf2d 100644
--- a/src/inc/unicode-range.md
+++ b/src/inc/unicode-range.md
@@ -3,6 +3,8 @@ While working on my custom [Anki] cards for learning Japanese and Turkish, I
 found that my font of choice for Japanese [IPAex] was not properly supporting
 glyphs used by Turkish, like [ğ].
 
+![before](/media/content/unicode-range/before.jpg)
+
 To fix this i am using a property of the `@font-face` rule to limit custom
 fonts to source their glyphs from a subset of the unicode range and force
 fallback to the next font in the set.
@@ -30,6 +32,8 @@ fallback to the next font in the set.
 }
 ```
 
+![after](/media/content/unicode-range/after.jpg)
+
 [Anki]: https://apps.ankiweb.net/
 [IPAex]: https://ja.wikipedia.org/wiki/IPA%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88
 [ğ]: https://en.wikipedia.org/wiki/%C4%9E