gzr.im — unicode-range

From 57a0b5367a535087531894155b222355ca396e2f Mon Sep 17 00:00:00 2001 From: Robert Günzler Date: Fri, 7 Mar 2025 01:34:05 +0100 Subject: % update site MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Robert Günzler --- site/index.html | 3 +- site/notes.html | 3 +- site/unicode-range.html | 77 +++++++++++++++++++++++++++++++++++++++++++++++ src/inc/index.htm | 1 + src/inc/notes.htm | 1 + src/inc/notes.md | 1 + src/inc/unicode-range.htm | 32 ++++++++++++++++++++ src/inc/unicode-range.md | 35 +++++++++++++++++++++ 8 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 site/unicode-range.html create mode 100644 src/inc/unicode-range.htm create mode 100644 src/inc/unicode-range.md 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 @@

-Edited on 2025-01-24 [src] +Edited on 2025-03-07 [src]
robertgzr 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 @@

2025-01-08: pyonji

2025-01-10: sony-wf1000xm3-battery

2025-01-24: plan9-cursors

2025-03-07: unicode-range

-Edited on 2025-01-24 [src] +Edited on 2025-03-07 [src]
robertgzr 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 @@ + + + + + + + + + + +gzr.im — unicode-range + + +

+ +

+ + +

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.

@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;
+}

+ +[⏶] + + 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 @@

shikoku

sony-wf1000xm3-battery

toyama

unicode-range

yamanashi

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 @@

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/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 @@ + +

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.

@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;
+}

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 -- cgit 1.4.1