% update site

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

8 files changed, 151 insertions, 2 deletions

diff --git a/site/index.html b/site/index.html
index de83381..30192f3 100644
--- a/site/index.html
+++ b/site/index.html
@@ -49,12 +49,13 @@
 <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>
 </main>
 <footer>
 <span style="">
-Edited on 2025-01-24 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/index.htm" target="_blank">[src]</a>
+Edited on 2025-03-07 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/index.htm" target="_blank">[src]</a>
 </span>
 <br>
 <b>robertgzr</b>
diff --git a/site/notes.html b/site/notes.html
index 9b549e4..62d3516 100644
--- a/site/notes.html
+++ b/site/notes.html
@@ -34,11 +34,12 @@
 <li><code>2025-01-08</code>: <a href="/site/pyonji.html">pyonji</a></li>
 <li><code>2025-01-10</code>: <a href="/site/sony-wf1000xm3-battery.html">sony-wf1000xm3-battery</a></li>
 <li><code>2025-01-24</code>: <a href="/site/plan9-cursors.html">plan9-cursors</a></li>
+<li><code>2025-03-07</code>: <a href="/site/unicode-range.html">unicode-range</a></li>
 </ul>
 </main>
 <footer>
 <span style="">
-Edited on 2025-01-24 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/notes.htm" target="_blank">[src]</a>
+Edited on 2025-03-07 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/notes.htm" target="_blank">[src]</a>
 </span>
 <br>
 <b>robertgzr</b>
diff --git a/site/unicode-range.html b/site/unicode-range.html
new file mode 100644
index 0000000..b9868b9
--- /dev/null
+++ b/site/unicode-range.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="thumbnail" content="/media/services/thumbnail.jpg">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/links/rss.xml">
+<link rel="stylesheet" type="text/css" href="/links/main.css">
+<link rel="shortcut icon" type="image/png" href="/media/services/icon.png">
+<link rel="license" href="https://git.sr.ht/~robertgzr/site/blob/master/LICENSE.content">
+<title>gzr.im &mdash; unicode-range</title>
+</head>
+<body>
+<header>
+<a href="/"><img src="/media/interface/logo.svg" alt="gzr.im"></a>
+</header>
+<nav>
+<section>
+    <ul class="nobull capital">
+        <li><a href="/site/about.html">about</a></li>
+        <li><a href="/site/notes.html">notes</a></li>
+    </ul>
+</section>
+<section>
+    <ul class="nobull capital">
+        <li><a href="/site/books.html">books</a></li>
+    </ul>
+</section>
+</nav>
+<main>
+<!-- Generated file, do not edit -->
+<!-- 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>
+</main>
+<footer>
+<span style="">
+Edited on 2025-03-07 <a href="https://git.sr.ht/~robertgzr/site/tree/master/src/inc/unicode-range.htm" target="_blank">[src]</a>
+</span>
+<br>
+<b>robertgzr</b>
+&copy; 2025
+&mdash;
+<a href="https://git.sr.ht/~robertgzr/site/blob/master/LICENSE.content" target="_blank">BY-NC-SA 4.0</a>
+</footer>
+<a href="#top">[&#9206;]</a>
+</body>
+</html>
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