% update site

Signed-off-by: Robert Günzler <r@gnzler.io>

5 files changed, 70 insertions, 0 deletions

diff --git a/src/inc/index.htm b/src/inc/index.htm
index b94b802..7318c4e 100644
--- a/src/inc/index.htm
+++ b/src/inc/index.htm
@@ -18,5 +18,6 @@
 <li><a href="/site/shikoku.html">shikoku</a></li>
 <li><a href="/site/sony-wf1000xm3-battery.html">sony-wf1000xm3-battery</a></li>
 <li><a href="/site/toyama.html">toyama</a></li>
+<li><a href="/site/unicode-range.html">unicode-range</a></li>
 <li><a href="/site/yamanashi.html">yamanashi</a></li>
 </ul>
diff --git a/src/inc/notes.htm b/src/inc/notes.htm
index 98f0d44..6c7279c 100644
--- a/src/inc/notes.htm
+++ b/src/inc/notes.htm
@@ -3,4 +3,5 @@
 <li><code>2025-01-08</code>: {pyonji}</li>
 <li><code>2025-01-10</code>: {sony-wf1000xm3-battery}</li>
 <li><code>2025-01-24</code>: {plan9-cursors}</li>
+<li><code>2025-03-07</code>: {unicode-range}</li>
 </ul>
diff --git a/src/inc/notes.md b/src/inc/notes.md
index 011a7c8..76e88d9 100644
--- a/src/inc/notes.md
+++ b/src/inc/notes.md
@@ -2,4 +2,5 @@
 * `2025-01-08`: {pyonji}
 * `2025-01-10`: {sony-wf1000xm3-battery}
 * `2025-01-24`: {plan9-cursors}
+* `2025-03-07`: {unicode-range}
 
diff --git a/src/inc/unicode-range.htm b/src/inc/unicode-range.htm
new file mode 100644
index 0000000..778cb7c
--- /dev/null
+++ b/src/inc/unicode-range.htm
@@ -0,0 +1,32 @@
+<!-- Generated file, you may edit and discard src/inc/unicode-range.md :) -->
+<p>While working on my custom <a href="https://apps.ankiweb.net/"
+target="_blank">Anki</a> cards for learning Japanese and Turkish, I
+found that my font of choice for Japanese <a
+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>
+<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>
+<div class="sourceCode" id="cb1"><pre
+class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="im">@font-face</span> {</span>
+<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>    <span class="kw">font-family</span><span class="ch">:</span> <span class="st">&quot;IPAexGothic&quot;</span><span class="op">;</span></span>
+<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a>    <span class="kw">src</span><span class="ch">:</span></span>
+<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>        <span class="fu">local(</span><span class="st">&quot;IPAexGothic&quot;</span><span class="fu">)</span><span class="op">,</span></span>
+<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a>        <span class="fu">url(</span><span class="st">&quot;_ipaexg.ttf&quot;</span><span class="fu">)</span><span class="op">;</span></span>
+<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>    <span class="kw">unicode-range</span><span class="ch">:</span> </span>
+<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a>        <span class="dv">U+0020-007F</span><span class="op">,</span></span>
+<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a>        <span class="dv">U+3000-303f</span><span class="op">,</span></span>
+<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a>        <span class="dv">U+3040-309f</span><span class="op">,</span></span>
+<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a>        <span class="dv">U+30a0-30ff</span><span class="op">,</span></span>
+<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a>        <span class="dv">U</span>+<span class="dv">ff00-ffef</span><span class="op">,</span></span>
+<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a>        <span class="dv">U+4e00-9faf</span><span class="op">;</span></span>
+<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a>}</span>
+<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a><span class="fu">.card</span> {</span>
+<span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a>    <span class="kw">font-family</span><span class="ch">:</span></span>
+<span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a>        <span class="dv">IPAexGothic</span><span class="op">,</span></span>
+<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>
diff --git a/src/inc/unicode-range.md b/src/inc/unicode-range.md
new file mode 100644
index 0000000..8c68636
--- /dev/null
+++ b/src/inc/unicode-range.md
@@ -0,0 +1,35 @@
+
+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 [ğ].
+
+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.
+
+```css
+@font-face {
+    font-family: "IPAexGothic";
+    src:
+        local("IPAexGothic"),
+        url("_ipaexg.ttf");
+    unicode-range: 
+        U+0020-007F,
+        U+3000-303f,
+        U+3040-309f,
+        U+30a0-30ff,
+        U+ff00-ffef,
+        U+4e00-9faf;
+}
+
+.card {
+    font-family:
+        IPAexGothic,
+        Noto Sans,
+        sans;
+}
+```
+
+[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