feat: arabic font support

Author: martinheidegger

public/fonts/146b2193f4aee343a8da5e2295255b04db547d74339a12be51763b3a0081868d.ttf

@@ -3,6 +3,7 @@ import { writeFile, readdir, unlink } from "node:fs/promises";
 
 const fonts = [
   { family: "Noto Sans JP", weights: "400;700" },
+  { family: "Noto Sans Arabic", weights: "400;700" },
   { family: "Permanent Marker", weights: "400" },
   { family: "Shippori Antique B1", weights: "400" },
 ];

public/fonts/195e8d8e1e723630e46c1d19fe7ec118a73e5825baa198737d6a96df8c4063b1.ttf

@@ -9,6 +9,8 @@ import { ICON_RATIOS } from "@/docs/card/icon-ratios";
 import { ICON_WHITE_BG } from "@/docs/card/icon-white-bg";
 import type { AllIconTypes, CardV1Type } from "@/docs/card";
 import type { DocPageView } from "@/components/safeDoc-react/DocView";
+import { NotoSansArabic } from "@/components/fonts/NotoSansArabic";
+import { TextWithFont } from "@/components/fonts/TextWithFont";
 
 type BigProps = {
   kana?: string;
@@ -39,17 +41,17 @@ const Big = ({ kana, text, className, ref }: BigProps) => {
     <g ref={ref} className={clsx("big", className)}>
       {zoom}
       {text && kana ? (
-        <text ref={refs.kana} className={clsx("big--kana", className)}>
+        <TextWithFont ref={refs.kana} className={clsx("big--kana", className)}>
           {kana}
-        </text>
+        </TextWithFont>
       ) : null}
-      <text
+      <TextWithFont
         ref={refs.regular}
         className={clsx("big--regular", className)}
         fontSize="40px"
       >
         {text}
-      </text>
+      </TextWithFont>
     </g>
   );
 };
@@ -208,11 +210,17 @@ export const CardDisplayFront: DocPageView<CardV1Type> = ({
     <BusinessCardSvg ref={ref} isCut={!showMargins} background="white">
       <style>{`
             ${NotoSansJP.css}
+            ${NotoSansArabic.css}
             /* Style the text */
             text {
                 font-family: "${NotoSansJP.name}", sans-serif;
                 color: #111111;
             }
+            .arabic {
+                font-family: "${NotoSansArabic.name}", sans-serif;
+                baseline-shift: .45em;
+                line-height: 1.1em;
+            }
             .big--regular {
                 font-size: 50px;
                 font-weight: normal;

scripts/import-fonts

@@ -0,0 +1,25 @@
+import type { Font } from "./font";
+/**
+ * Generated from url=https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700
+ *
+ * Generated using -> npm run import:fonts
+ */
+export const NotoSansArabic = {
+  name: "Noto Sans Arabic",
+  css: `
+@font-face {
+  font-family: 'Noto Sans Arabic';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  src: url(/fonts/146b2193f4aee343a8da5e2295255b04db547d74339a12be51763b3a0081868d.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Noto Sans Arabic';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: normal;
+  src: url(/fonts/195e8d8e1e723630e46c1d19fe7ec118a73e5825baa198737d6a96df8c4063b1.ttf) format('truetype');
+}
+`,
+} satisfies Font;

src/components/docs/card/CardDisplayFront.tsx

@@ -0,0 +1,25 @@
+import { clsx } from "clsx";
+import type { SVGTextElementAttributes } from "react";
+
+export type TextWithFontProps = Omit<
+  SVGTextElementAttributes<SVGTextElement>,
+  "children"
+> & {
+  children: string | undefined;
+};
+export function TextWithFont({
+  children: text,
+  className,
+  ...rest
+}: TextWithFontProps) {
+  return (
+    <text
+      className={clsx(className, {
+        arabic: text ? /[\u0600-\u06FF\u0750-\u077F]/.test(text) : false,
+      })}
+      {...rest}
+    >
+      {text}
+    </text>
+  );
+}