diff options
Diffstat (limited to 'src/inc')
| -rw-r--r-- | src/inc/unicode-range.htm | 73 | ||||
| -rw-r--r-- | src/inc/unicode-range.md | 39 |
2 files changed, 38 insertions, 74 deletions
diff --git a/src/inc/unicode-range.htm b/src/inc/unicode-range.htm index 314e82d..dc39a9c 100644 --- a/src/inc/unicode-range.htm +++ b/src/inc/unicode-range.htm @@ -1,40 +1,43 @@ -<!-- 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>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> + <figure> -<img src="/media/content/unicode-range/before.jpg" alt="before" /> -<figcaption aria-hidden="true">before</figcaption> + <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> -<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> + 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> + +<pre> +<code>@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; +}</code> +</pre> + <figure> -<img src="/media/content/unicode-range/after.jpg" alt="after" /> -<figcaption aria-hidden="true">after</figcaption> + <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 deleted file mode 100644 index fdadf2d..0000000 --- a/src/inc/unicode-range.md +++ /dev/null @@ -1,39 +0,0 @@ - -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 |