Use system brush font when available, ensure ruby text aligned center

justinsilvestre · Feb 12, 2024 · 6427399 · 6427399
1 parent a6c4798
commit 6427399
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -29,3 +29,7 @@ body {
     text-wrap: balance;
   }
 }
+
+rt {
+  text-align: center;
+}
diff --git a/src/app/texts/[textId]/ChineseWithPopover.tsx b/src/app/texts/[textId]/ChineseWithPopover.tsx
@@ -53,7 +53,11 @@ export function ChineseWithPopover({
         const entries = vocab[char];
 
         if (!entries?.length) {
-          return <span key={i}>{char}</span>;
+          return (
+            <span key={i} className="font-brush">
+              {char}
+            </span>
+          );
         }
 
         const enGloss = gloss?.[glossIndex]?.replace(/_/g, " ") || null;
@@ -94,7 +98,7 @@ export function ChineseWithPopover({
             })}
           >
             <ruby>
-              {char}
+              <span className="font-brush">{char}</span>
               <RubyText
                 enGloss={enGloss}
                 char={char}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-import { colors } from "tailwindcss/defaultTheme";
+import { colors, fontFamily } from "tailwindcss/defaultTheme";
 
 const config: Config = {
   content: [
@@ -14,6 +14,24 @@ const config: Config = {
         foreground: "rgb(var(--foreground-rgb))",
         background: "rgb(var(--background-rgb))",
       },
+      fontFamily: {
+        brush: [
+          "Free HK Kai",
+          "tw-kai",
+          "STKaiti",
+          "SimKai",
+          "KaiTi",
+          "KaiU",
+          "DFKai-SB",
+          "BiauKai",
+          "Han-Nom Khai",
+          "kaisho",
+          "yukyokasho",
+          "uc digi kyokasho",
+          "kyokasho",
+          ...fontFamily.sans,
+        ],
+      },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,3 +29,7 @@ body { @@
         text-wrap: balance;
       }
     }
+    rt {
+      text-align: center;
+    }