diff options
| -rw-r--r-- | site/index.html | 3 | ||||
| -rw-r--r-- | site/notes.html | 3 | ||||
| -rw-r--r-- | site/unicode-range.html | 77 | ||||
| -rw-r--r-- | src/inc/index.htm | 1 | ||||
| -rw-r--r-- | src/inc/notes.htm | 1 | ||||
| -rw-r--r-- | src/inc/notes.md | 1 | ||||
| -rw-r--r-- | src/inc/unicode-range.htm | 32 | ||||
| -rw-r--r-- | src/inc/unicode-range.md | 35 |
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 — 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">"IPAexGothic"</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">"IPAexGothic"</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">"_ipaexg.ttf"</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> +© 2025 +— +<a href="https://git.sr.ht/~robertgzr/site/blob/master/LICENSE.content" target="_blank">BY-NC-SA 4.0</a> +</footer> +<a href="#top">[⏶]</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">"IPAexGothic"</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">"IPAexGothic"</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">"_ipaexg.ttf"</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 |