From cee4c1ebab552a5560f39ac1fb945205fada0ca9 Mon Sep 17 00:00:00 2001
From: justinsilvestre <justinsilvestre@gmail.com>
Date: Mon, 20 Nov 2023 17:05:26 +0100
Subject: [PATCH] Fill out readings section

---
 app/components/AppLink.tsx                    |   2 -
 app/features/dictionary/Dialog.tsx            | 214 +++++++++++
 app/features/dictionary/DictEntryReadings.tsx | 359 ++++++++++++++++++
 .../SingleFigureDictionaryEntry.tsx           |   9 +-
 .../dictionary/kanjidicKanaToRomaji.ts        | 191 ++++++++++
 app/routes/dict.$figureId.sino.tsx            |  50 +++
 package-lock.json                             |  60 +++
 package.json                                  |   2 +
 8 files changed, 883 insertions(+), 4 deletions(-)
 create mode 100644 app/features/dictionary/Dialog.tsx
 create mode 100644 app/features/dictionary/DictEntryReadings.tsx
 create mode 100644 app/features/dictionary/kanjidicKanaToRomaji.ts
 create mode 100644 app/routes/dict.$figureId.sino.tsx

diff --git a/app/components/AppLink.tsx b/app/components/AppLink.tsx
index 290a198de..798d88e77 100644
--- a/app/components/AppLink.tsx
+++ b/app/components/AppLink.tsx
@@ -32,9 +32,7 @@ export function DictLink({
 }: LinkProps<{ figureId: string; focusOnLoad?: boolean }>) {
   const linkRef = useRef<HTMLAnchorElement>(null);
   useEffect(() => {
-    console.log("focusOnLoad?", figureId);
     if (focusOnLoad) {
-      console.log("focusOnLoad!!", figureId);
       linkRef.current?.focus();
     }
   }, [figureId, focusOnLoad]);
diff --git a/app/features/dictionary/Dialog.tsx b/app/features/dictionary/Dialog.tsx
new file mode 100644
index 000000000..23302bcfb
--- /dev/null
+++ b/app/features/dictionary/Dialog.tsx
@@ -0,0 +1,214 @@
+import {
+  useFloating,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useMergeRefs,
+  FloatingPortal,
+  FloatingFocusManager,
+  FloatingOverlay,
+  useId,
+} from "@floating-ui/react";
+import * as React from "react";
+
+interface DialogOptions {
+  initialOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useDialog({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: DialogOptions = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = React.useState<
+    string | undefined
+  >();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    open,
+    onOpenChange: setOpen,
+  });
+
+  const context = data.context;
+
+  const click = useClick(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context, { outsidePressEvent: "mousedown" });
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId],
+  );
+}
+
+type ContextType =
+  | (ReturnType<typeof useDialog> & {
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setDescriptionId: React.Dispatch<
+        React.SetStateAction<string | undefined>
+      >;
+    })
+  | null;
+
+const DialogContext = React.createContext<ContextType>(null);
+
+export const useDialogContext = () => {
+  const context = React.useContext(DialogContext);
+
+  if (context == null) {
+    throw new Error("Dialog components must be wrapped in <Dialog />");
+  }
+
+  return context;
+};
+
+export function Dialog({
+  children,
+  ...options
+}: {
+  children: React.ReactNode;
+} & DialogOptions) {
+  const dialog = useDialog(options);
+  return (
+    <DialogContext.Provider value={dialog}>{children}</DialogContext.Provider>
+  );
+}
+
+interface DialogTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+export const DialogTrigger = React.forwardRef<
+  HTMLElement,
+  React.HTMLProps<HTMLElement> & DialogTriggerProps
+>(function DialogTrigger({ children, asChild = false, ...props }, propRef) {
+  const context = useDialogContext();
+  const childrenRef = (children as unknown as { ref: React.Ref<HTMLElement> })
+    .ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        "data-state": context.open ? "open" : "closed",
+      }),
+    );
+  }
+
+  return (
+    <button
+      ref={ref}
+      // The user can style the trigger based on the state
+      data-state={context.open ? "open" : "closed"}
+      {...context.getReferenceProps(props)}
+    >
+      {children}
+    </button>
+  );
+});
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLProps<HTMLDivElement>
+>(function DialogContent(props, propRef) {
+  const { context: floatingContext, ...context } = useDialogContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!floatingContext.open) return null;
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay className="grid place-items-center">
+        <FloatingFocusManager context={floatingContext}>
+          <div
+            ref={ref}
+            aria-labelledby={context.labelId}
+            aria-describedby={context.descriptionId}
+            {...context.getFloatingProps(props)}
+          >
+            {props.children}
+          </div>
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  );
+});
+
+export const DialogHeading = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLProps<HTMLHeadingElement>
+>(function DialogHeading({ children, ...props }, ref) {
+  const { setLabelId } = useDialogContext();
+  const id = useId();
+
+  // Only sets `aria-labelledby` on the Dialog root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
+
+  return (
+    <h2 {...props} ref={ref} id={id}>
+      {children}
+    </h2>
+  );
+});
+
+export const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLProps<HTMLParagraphElement>
+>(function DialogDescription({ children, ...props }, ref) {
+  const { setDescriptionId } = useDialogContext();
+  const id = useId();
+
+  // Only sets `aria-describedby` on the Dialog root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(undefined);
+  }, [id, setDescriptionId]);
+
+  return (
+    <p {...props} ref={ref} id={id}>
+      {children}
+    </p>
+  );
+});
+
+export const DialogClose = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(function DialogClose(props, ref) {
+  const { setOpen } = useDialogContext();
+  return (
+    <button type="button" {...props} ref={ref} onClick={() => setOpen(false)} />
+  );
+});
diff --git a/app/features/dictionary/DictEntryReadings.tsx b/app/features/dictionary/DictEntryReadings.tsx
new file mode 100644
index 000000000..0c553c61b
--- /dev/null
+++ b/app/features/dictionary/DictEntryReadings.tsx
@@ -0,0 +1,359 @@
+import { useFetcher } from "@remix-run/react";
+import { convert as toRevisedKoreanRomanization } from "hangul-romanization";
+import { Fragment, useRef, useState } from "react";
+
+import { FigureSinoReadingsLoaderData } from "~/routes/dict.$figureId.sino";
+
+import { Dialog, DialogContent, DialogTrigger } from "./Dialog";
+import { DictionaryPageFigureWithPriorityUses } from "./getDictionaryPageFigure.server";
+import { kanjidicKanaToRomaji } from "./kanjidicKanaToRomaji";
+import { transcribeSbgyXiaoyun } from "./transcribeSbgyXiaoyun";
+
+export function DictEntryReadings({
+  figureId,
+  readings,
+  isStandaloneCharacter,
+  className = "",
+}: {
+  figureId: string;
+  readings: DictionaryPageFigureWithPriorityUses["reading"];
+  isStandaloneCharacter?: boolean;
+  className?: string;
+}) {
+  const [animationState, setAnimationState] = useState<
+    "entering" | "entered" | "exiting" | "exited"
+  >("exited");
+  const timer = useRef<number | null>(null);
+  function requestClose() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setAnimationState("exiting");
+    timer.current = setTimeout(() => {
+      setAnimationState("exited");
+    }, 300) as unknown as number;
+  }
+  function requestOpen() {
+    getSinoReadings();
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setAnimationState("entering");
+    timer.current = setTimeout(() => {
+      setAnimationState("entered");
+    }, 300) as unknown as number;
+  }
+
+  const {
+    fetcher: { data: fetcherData },
+    getSinoReadings,
+  } = useSinoReadingsFetcher(figureId);
+
+  if (!readings) return null;
+
+  // const guangyun = readings?.guangyunYunjing
+  //   ? parrseAndAbbreviateGuangyun({ guangyunJsons: readings.guangyunYunjing })
+  //   : null;
+
+  // const syllables = guangyun?.transcriptions.flatMap((x) =>
+  //   x.syllableProfile ? x : [],
+  // );
+
+  const unihanReadings = fetcherData?.readings?.unihan15;
+  const mandarinReadings = unihanReadings?.kMandarin?.length
+    ? unihanReadings.kMandarin
+    : unihanReadings?.kHanyuPinyin.map((pinyin) => pinyin.split(":")[1] || "");
+  const hangulReadings = unihanReadings?.kHangul.map(
+    (k) => k.split(":")[0] || "",
+  );
+  const cantoneseReadings = unihanReadings?.kCantonese;
+  const vietnameseReadings = unihanReadings?.kVietnamese;
+
+  const guangyunReadings = readings.sbgyXiaoyuns.map(
+    (sbxy) => sbxy.sbgyXiaoyun,
+  );
+
+  return (
+    <section
+      className={`flex flex-col rounded-lg [box-shadow:3px_3px_12px_rgba(0,0,0,.3)] ${className}`}
+    >
+      <div className=" flex flex-row flex-wrap justify-evenly gap-4 px-4 py-4">
+        <div className="text-left">
+          <dt className="mb-1 text-sm text-gray-500">
+            Japanese <i>on&apos;yomi</i>{" "}
+            {isStandaloneCharacter &&
+            readings.kanjidicEntry?.onReadings.length &&
+            readings.kanjidicEntry.onReadings.length !== 1 &&
+            !readings.selectedOnReadings.length ? (
+              <> (rare or obsolete)</>
+            ) : null}
+          </dt>
+          <dd className="text-center text-xl font-light leading-9">
+            {!(
+              readings?.selectedOnReadings.length ||
+              readings?.kanjidicEntry?.onReadings.length
+            ) ? (
+              <UnavailableNote />
+            ) : null}
+            {readings?.selectedOnReadings?.map((onReading, i) => {
+              return (
+                <Fragment key={onReading}>
+                  <OnReading onReading={onReading} i={i} />
+                </Fragment>
+              );
+            })}
+            {readings.kanjidicEntry?.onReadings?.map((onReading, i) => {
+              if (readings.selectedOnReadings.includes(onReading)) return null;
+              return (
+                <Fragment key={onReading}>
+                  <OnReading
+                    onReading={onReading}
+                    i={i + readings.selectedOnReadings.length}
+                  />
+                  {readings.selectedOnReadings.length ? "*" : ""}
+                </Fragment>
+              );
+            })}
+          </dd>
+        </div>
+        {guangyunReadings?.length ? (
+          <Dialog>
+            <DialogTrigger>
+              <div className="text-left">
+                <dt className="mb-1 text-sm text-gray-500">Middle Chinese</dt>
+                <dd className="text-xl leading-9 text-gray-700 drop-shadow-md">
+                  <div className="scallop text-center">
+                    {guangyunReadings
+                      .map((xy) => transcribeSbgyXiaoyun(xy))
+                      .join(" ")}
+                  </div>
+                </dd>
+              </div>
+            </DialogTrigger>
+            <DialogContent className=" [border:2px inset #afafaf33] p-3 text-sm shadow-xl shadow-gray-400 transition-opacity duration-300 [width:40v] [min-width:17rem] [max-width:80vw] [max-height:80vh]  [background-color:rgba(247,247,247,0.95)]  [border-radius:0.3em] [box-sizing:border-box]  [overflow-y:auto] md:max-w-xl">
+              <div className="">details</div>
+            </DialogContent>
+          </Dialog>
+        ) : null}
+        {animationState !== "exited" ? (
+          <div
+            className={`slideDown ${animationState}  flex flex-row flex-wrap justify-evenly gap-4 px-4 py-4`}
+          >
+            <div className="text-left [max-width:10em]">
+              <dt className="mb-1 text-sm text-gray-500">Mandarin Chinese</dt>
+              <dd className="text-xl font-light leading-9">
+                {mandarinReadings?.join(" ")}
+                {!mandarinReadings?.length ? <UnavailableNote /> : null}
+              </dd>
+            </div>
+            <div className="text-left [max-width:10em]">
+              <dt className="mb-1 text-sm text-gray-500">Cantonese</dt>
+              <dd className="text-xl font-light leading-9">
+                {!cantoneseReadings?.length ? <UnavailableNote /> : null}
+                {cantoneseReadings
+                  ? convertNumbersToSuperscript(cantoneseReadings?.join(", "))
+                  : null}
+              </dd>
+            </div>
+            <div className="text-left [max-width:10em]">
+              <dt className="mb-1 text-sm text-gray-500">Korean</dt>
+              <dd className="text-xl font-light leading-9">
+                {!hangulReadings?.length ? <UnavailableNote /> : null}
+                {hangulReadings?.map((k) => (
+                  <span key={k} className="">
+                    {k}{" "}
+                    <span className="[font-variant:small-caps]">
+                      {toRevisedKoreanRomanization(k)}
+                    </span>{" "}
+                  </span>
+                ))}
+              </dd>
+            </div>
+            <div className="text-left [max-width:10em]">
+              <dt className="mb-1 text-sm text-gray-500">Vietnamese</dt>
+              <dd className="text-xl font-light leading-9">
+                {vietnameseReadings?.join(", ")}
+                {!vietnameseReadings?.length ? <UnavailableNote /> : null}
+              </dd>
+            </div>
+          </div>
+        ) : null}
+
+        <div
+          tabIndex={0}
+          role="button"
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              animationState === "entered" || animationState === "entering"
+                ? requestClose()
+                : requestOpen();
+            }
+          }}
+          className={`cursor-pointer px-4 pb-2 text-right hover:text-orange-700 hover:underline`}
+          onClick={() =>
+            animationState === "entered" || animationState === "entering"
+              ? requestClose()
+              : requestOpen()
+          }
+        >
+          {animationState === "entered" || animationState === "entering"
+            ? "less"
+            : "more"}
+        </div>
+        <div className="border-t-solid fadeIn flex flex-row flex-wrap justify-evenly gap-4 border-t border-t-gray-600 border-opacity-30 px-4 py-4 text-center transition-all">
+          <div>
+            <dt className="mb-1 text-sm text-gray-500">
+              Japanese <i>kun&apos;yomi</i>
+            </dt>
+            <dd className="text-center text-xl font-light leading-9">
+              <div className="">
+                {!readings?.kanjidicEntry?.kunReadings?.length ? (
+                  <UnavailableNote />
+                ) : null}
+                {readings.kanjidicEntry?.kunReadings?.map((kana, i) => {
+                  const [kanaBeforeDot, kanaAfterDot] = kana.split(".");
+                  const [romaji, romajiAfterDot] = kanjidicKanaToRomaji(
+                    kana.replaceAll("-", ""),
+                    true,
+                  ).split(".");
+
+                  return (
+                    <Fragment key={kana}>
+                      <div
+                        key={kana}
+                        className="inline-block text-center [max-width:10em]"
+                      >
+                        <span className="block">
+                          {i !== 0 ? "・" : ""}
+                          {kanaBeforeDot}
+                          {kanaAfterDot ? (
+                            <span className=" text-yellow-900 text-opacity-70">
+                              {kanaAfterDot}
+                            </span>
+                          ) : null}
+                        </span>
+                        <span
+                          key={romaji + romajiAfterDot}
+                          className="-mt-1 block text-sm"
+                        >
+                          {kana.startsWith("-") ? "-" : ""}
+                          {romaji}
+                          {romajiAfterDot ? (
+                            <span className=" text-yellow-900 text-opacity-70">
+                              {romajiAfterDot}
+                            </span>
+                          ) : null}
+                          {kana.endsWith("-") ? "-" : ""}
+                        </span>
+                      </div>
+                    </Fragment>
+                  );
+                })}
+              </div>
+            </dd>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function OnReading({ onReading, i }: { onReading: string; i: number }) {
+  return (
+    <span key={onReading} className="inline-block">
+      <span className="block">
+        {i !== 0 ? "・" : ""}
+        {onReading.replace(/[a-z0-9]*$/g, "")}{" "}
+      </span>
+      <span className=" block text-center text-sm uppercase">
+        {kanjidicKanaToRomaji(onReading.replace(/[a-z0-9]*$/g, ""))}
+      </span>
+    </span>
+  );
+}
+
+function UnavailableNote() {
+  return (
+    <div className=" text-sm text-gray-400 [line-height:inherit]">
+      <span className="block text-center">not available</span>
+    </div>
+  );
+}
+
+// export function parseAndAbbreviateGuangyun({
+//   guangyunJsons,
+// }: {
+//   guangyunJsons: string[];
+// }) {
+//   const transcriptions = guangyunJsons.map((r) => {
+//     return parseGuangyunReading(r);
+//   });
+
+//   if (
+//     (transcriptions.length === 1 &&
+//       transcriptions[0].syllableProfile!.tone === 1) ||
+//     transcriptions[0].syllableProfile!.tone === 4
+//   ) {
+//     return { transcriptions, abbreviated: [transcriptions[0].reading] };
+//   }
+
+//   function getToneMark(tone: number) {
+//     if (tone === 2) return "ˬ";
+//     if (tone === 3) return "ˎ";
+//     return "";
+//   }
+
+//   const guangyunByCore = transcriptions.reduce((acc, transcription) => {
+//     const core = transcription.reading.replace(/ˬ|ˎ/g, "");
+//     acc.set(
+//       core,
+//       (acc.get(core) ?? new Set()).add(transcription.syllableProfile!.tone),
+//     );
+//     return acc;
+//   }, new Map<string, Set<number>>());
+
+//   const abbreviated =
+//     guangyunByCore &&
+//     Array.from(guangyunByCore, ([core, toneNumbers]) => {
+//       const toneMarks = Array.from(toneNumbers, getToneMark).join("");
+//       const withParens =
+//         toneNumbers.size > 1 && toneNumbers.has(1)
+//           ? (toneMarks: string) => `₍${toneMarks}₎`
+//           : (toneMarks: string) => toneMarks;
+
+//       return `${core}${withParens(toneMarks)}`;
+//     });
+
+//   return { abbreviated, transcriptions };
+// }
+
+const SUPERSCRIPT_NUMBERS = {
+  "0": "⁰",
+  "1": "¹",
+  "2": "²",
+  "3": "³",
+  "4": "⁴",
+  "5": "⁵",
+  "6": "⁶",
+  "7": "⁷",
+  "8": "⁸",
+  "9": "⁹",
+};
+function convertNumbersToSuperscript(string: string) {
+  return string.replace(
+    /([0-9])/g,
+    (match, p1) => SUPERSCRIPT_NUMBERS[p1 as keyof typeof SUPERSCRIPT_NUMBERS],
+  );
+}
+
+function useSinoReadingsFetcher(figureId: string) {
+  const fetcher = useFetcher<FigureSinoReadingsLoaderData>();
+  return {
+    fetcher,
+    getSinoReadings() {
+      if (fetcher.state === "idle") {
+        fetcher.load(`/dict/${figureId}/sino`);
+      }
+    },
+  };
+}
diff --git a/app/features/dictionary/SingleFigureDictionaryEntry.tsx b/app/features/dictionary/SingleFigureDictionaryEntry.tsx
index b3b47c7b2..30b1aefd6 100644
--- a/app/features/dictionary/SingleFigureDictionaryEntry.tsx
+++ b/app/features/dictionary/SingleFigureDictionaryEntry.tsx
@@ -5,7 +5,6 @@ import {
   IsPriorityComponentQueryFigure,
   StandaloneCharacterVariantQueryFigure,
   getBadgeProps,
-  getLists,
   isPriorityComponent,
   isPrioritySoundMark,
   isStandaloneCharacterVariant,
@@ -14,6 +13,7 @@ import type { DictionaryPageFigureWithPriorityUses } from "~/features/dictionary
 import { getHeadingsMeanings } from "~/features/dictionary/getHeadingsMeanings";
 import { transcribeSbgyXiaoyun } from "~/features/dictionary/transcribeSbgyXiaoyun";
 
+import { DictEntryReadings } from "./DictEntryReadings";
 import { DictionaryEntryComponentsTree } from "./DictionaryEntryComponentsTree";
 import { DictionaryHeadingMeanings } from "./DictionaryHeadingMeanings";
 import { FigurePriorityUses } from "./FigurePriorityUses";
@@ -43,11 +43,16 @@ export function SingleFigureDictionaryEntry({
 
       <FigureTags
         badgeProps={badgeProps}
-        lists={getLists(figureIsStandaloneCharacter, figure)}
         isSoundMark={figureIsPrioritySoundMark}
         isAtomic={figureIsAtomic(figure)}
       />
 
+      <DictEntryReadings
+        figureId={figure.id}
+        readings={figure.reading}
+        isStandaloneCharacter={figureIsStandaloneCharacter}
+      />
+
       <h2>{figure.reading?.selectedOnReadings?.join(" ") || "-"}</h2>
       <h2>{figure.reading?.kanjidicEntry?.onReadings?.join(" ")}</h2>
       <h2>{figure.reading?.kanjidicEntry?.kunReadings?.join(" ")}</h2>
diff --git a/app/features/dictionary/kanjidicKanaToRomaji.ts b/app/features/dictionary/kanjidicKanaToRomaji.ts
new file mode 100644
index 000000000..7b06a38a3
--- /dev/null
+++ b/app/features/dictionary/kanjidicKanaToRomaji.ts
@@ -0,0 +1,191 @@
+export function kanjidicKanaToRomaji(input: string, preserveDots = false) {
+  if (input === "みずうみ") return "mizuumi";
+  if (input === "からすうり") return "karasuuri";
+  if (input === "あるいは") return "aruiwa";
+  try {
+    let result = "";
+    for (let i = 0; i < input.length; i++) {
+      if (input[i] === ".") {
+        result += preserveDots ? "." : "";
+      } else {
+        result += kanaCharacterToRomaji(input, i);
+        if (MACRON_VOWELS.has(result.at(-1)!)) i++;
+      }
+    }
+    return result;
+  } catch (e) {
+    console.error(e);
+    throw new Error(`Error converting ${input} to romaji`);
+  }
+}
+
+const MACRON_VOWELS = new Set("āīūēō");
+
+// prettier-ignore
+const KATAKANA_TO_ROMAJI = {
+  ア: ["", "a"], イ: ["", "i"], ウ: ["", "u"], エ: ["", "e"], オ: ["", "o"], 
+  カ: "ka",キ: "ki", ク: "ku", ケ: "ke", コ: "ko",
+  サ: "sa",シ: ["sh", "i", "s"], ス: "su", セ: "se", ソ: "so",
+  タ: "ta",チ: ["ch", "i", "t"], ツ: ["ts", "u", "t"], テ: "te", ト: "to",
+  ナ: "na",ニ: "ni", ヌ: "nu", ネ: "ne", ノ: "no",
+  ハ: "ha",ヒ: "hi", フ: "fu", ヘ: "he", ホ: "ho",
+  マ: "ma",ミ: "mi", ム: "mu", メ: "me", モ: "mo",
+  ヤ: "ya", ユ: "yu", ヨ: "yo", 
+  ャ: "ya", ュ: "yu", ョ: "yo", 
+  ラ: "ra",リ: "ri", ル: "ru", レ: "re", ロ: "ro",
+  ワ: "wa",ヲ: "wo",
+  ン: ["n", ""], ガ: "ga",ギ: "gi", グ: "gu", ゲ: "ge", ゴ: "go",
+  ザ: "za",ジ: ["j", "i"], ズ: "zu", ゼ: "ze", ゾ: "zo",
+  ダ: "da",ヂ: ["j", "i"], ヅ: "zu", デ: "de", ド: "do",
+  バ: "ba",ビ: "bi", ブ: "bu", ベ: "be", ボ: "bo",
+  パ: "pa",ピ: "pi", プ: "pu", ペ: "pe", ポ: "po",
+  ッ: "",
+  ー: '',
+} as const;
+
+const HIRAGANA_TO_KATAKANA = Object.fromEntries(
+  `あア いイ うウ えエ おオ
+かカ きキ くク けケ こコ
+さサ しシ すス せセ そソ
+たタ ちチ つツ てテ とト
+なナ にニ ぬヌ ねネ のノ
+はハ ひヒ ふフ へヘ ほホ
+まマ みミ むム めメ もモ
+やヤ ゆユ よヨ
+がガ ぎギ ぐグ げゲ ごゴ
+ざザ じジ ずズ ぜゼ ぞゾ
+だダ ぢヂ づヅ でデ どド
+ばバ びビ ぶブ べベ ぼボ
+ぱパ ぴピ ぷプ ぺペ ぽポ
+っッ
+わワ をヲ
+んン
+ゃャ ゅュ ょョ
+らラ りリ るル れレ ろロ`
+    .split(/\s+/)
+    .map(([hiragana, katakana]) => [hiragana, katakana]),
+);
+
+const SMALL_YA_GYO = new Set("ャュョ");
+const MACRONIZED_VOWELS = {
+  a: "ā",
+  i: "ī",
+  u: "ū",
+  e: "ē",
+  o: "ō",
+};
+const O_GYO_KANA = new Set("オコゴソゾトドノホボポモヨョロヲ");
+const macronizeVowel = (vowel: string) => {
+  return MACRONIZED_VOWELS[vowel as keyof typeof MACRONIZED_VOWELS] || vowel;
+};
+
+const isValidKanaOrDot = (
+  kana: string,
+): kana is keyof typeof KATAKANA_TO_ROMAJI =>
+  kana === "." ||
+  kana in KATAKANA_TO_ROMAJI ||
+  HIRAGANA_TO_KATAKANA[kana] in KATAKANA_TO_ROMAJI;
+
+const getKatakana = (kanaInput: string, index: number) =>
+  HIRAGANA_TO_KATAKANA[kanaInput[index]] || kanaInput[index];
+
+const getNextKatakana = (kanaInput: string, index: number) => {
+  return kanaInput[index + 1] === "."
+    ? getKatakana(kanaInput, index + 2)
+    : getKatakana(kanaInput, index + 1);
+};
+
+const getNextCharacter = (kanaInput: string, index: number) => {
+  return getKatakana(kanaInput, index + 1);
+};
+
+function kanaCharacterToRomaji(kanaInput: string, index: number) {
+  const kanaCharacter = getKatakana(kanaInput, index);
+  const kanaIsValid = isValidKanaOrDot(kanaCharacter);
+  if (!kanaIsValid) throw new Error(`Invalid kana character: ${kanaCharacter}`);
+  const nextKana = getNextKatakana(kanaInput, index);
+  let isLong = nextKana === "ー";
+  if (!isLong) {
+    const nextKanaSpecs =
+      KATAKANA_TO_ROMAJI[
+        getNextCharacter(kanaInput, index) as keyof typeof KATAKANA_TO_ROMAJI
+      ];
+
+    isLong =
+      (!nextKanaSpecs?.[0] &&
+        nextKanaSpecs?.[1] ===
+          KATAKANA_TO_ROMAJI[
+            kanaCharacter as keyof typeof KATAKANA_TO_ROMAJI
+          ][1] &&
+        !(nextKanaSpecs?.[1] === "i" && index + 1 === kanaInput.length - 1)) ||
+      (nextKana === "ウ" &&
+        kanaInput[index + 1] !== "." &&
+        O_GYO_KANA.has(kanaCharacter));
+  }
+
+  switch (kanaCharacter) {
+    case "ー": {
+      return "";
+    }
+    case "ッ": {
+      const nextKanaCharacter = nextKana;
+      if (!nextKanaCharacter) return "";
+      const nextKanaIsValid = isValidKanaOrDot(nextKanaCharacter);
+      if (!nextKanaIsValid)
+        throw new Error(`Invalid kana character: ${nextKanaCharacter}`);
+      return (
+        KATAKANA_TO_ROMAJI[nextKanaCharacter][2] ??
+        KATAKANA_TO_ROMAJI[nextKanaCharacter][0]
+      );
+    }
+    case "ン": {
+      const nextKanaCharacter = nextKana;
+      if (!nextKanaCharacter) return "n";
+      const nextKanaIsValid = isValidKanaOrDot(nextKanaCharacter);
+      if (!nextKanaIsValid)
+        throw new Error(`Invalid kana character: ${nextKanaCharacter}`);
+      const nextRomaji = KATAKANA_TO_ROMAJI[nextKanaCharacter];
+      if (!nextRomaji[0] || nextRomaji[0] === "y") return "n'";
+      return "n";
+    }
+    case "キ":
+    case "シ":
+    case "チ":
+    case "ニ":
+    case "ヒ":
+    case "ミ":
+    case "リ":
+    case "ギ":
+    case "ジ":
+    case "ヂ":
+    case "ビ":
+    case "ピ": {
+      const romaji = KATAKANA_TO_ROMAJI[kanaCharacter];
+      const nextIsSmallYaGyo = SMALL_YA_GYO.has(nextKana);
+      if (nextIsSmallYaGyo)
+        return romaji[0] + (Array.isArray(romaji) ? "" : "y");
+      return isLong
+        ? romaji[0] + macronizeVowel(romaji[1])
+        : romaji[0] + romaji[1];
+    }
+
+    case "ア":
+    case "イ":
+    case "ウ":
+    case "エ":
+    case "オ":
+    case "ャ":
+    case "ュ":
+    case "ョ":
+      return isLong
+        ? macronizeVowel(KATAKANA_TO_ROMAJI[kanaCharacter][1])
+        : KATAKANA_TO_ROMAJI[kanaCharacter][1];
+
+    default: {
+      const romaji = KATAKANA_TO_ROMAJI[kanaCharacter];
+      return isLong
+        ? romaji[0] + macronizeVowel(romaji[1]!)
+        : romaji[0] + romaji[1];
+    }
+  }
+}
diff --git a/app/routes/dict.$figureId.sino.tsx b/app/routes/dict.$figureId.sino.tsx
new file mode 100644
index 000000000..07490f015
--- /dev/null
+++ b/app/routes/dict.$figureId.sino.tsx
@@ -0,0 +1,50 @@
+import type { LoaderFunction } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+
+import { prisma } from "~/db.server";
+
+export interface FigureSinoReadingsLoaderData {
+  readings: FigureSinoReadings | null;
+}
+
+export type FigureSinoReadings = NonNullable<
+  Awaited<ReturnType<typeof getSinoCharacterReadings>>
+>["reading"];
+
+async function getSinoCharacterReadings(figureId: string) {
+  return await prisma.kanjisenseFigure.findUnique({
+    where: { id: figureId },
+    select: {
+      reading: {
+        select: {
+          unihan15: {
+            select: {
+              kHangul: true,
+              kVietnamese: true,
+              kCantonese: true,
+              kMandarin: true,
+              kHanyuPinyin: true,
+            },
+          },
+        },
+      },
+    },
+  });
+}
+
+export const loader: LoaderFunction = async ({ params }) => {
+  const figureId = params.figureId!;
+
+  const figure = await getSinoCharacterReadings(figureId);
+
+  if (!figure) {
+    throw new Response(
+      `No figure ${JSON.stringify(figureId)} could be found in the database.`,
+      { status: 404 },
+    );
+  }
+
+  return json<FigureSinoReadingsLoaderData>({
+    readings: figure.reading || null,
+  });
+};
diff --git a/package-lock.json b/package-lock.json
index aa9d02233..e62344de6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "name": "kanjisense-cf4b",
       "dependencies": {
+        "@floating-ui/react": "^0.26.2",
         "@isaacs/express-prometheus-middleware": "^1.2.1",
         "@popperjs/core": "^2.11.8",
         "@prisma/client": "^5.5.2",
@@ -19,6 +20,7 @@
         "cross-env": "^7.0.3",
         "emittery": "^0.13.1",
         "express": "^4.18.2",
+        "hangul-romanization": "^1.0.1",
         "isbot": "^3.7.0",
         "morgan": "^1.10.0",
         "prom-client": "^15.0.0",
@@ -1409,6 +1411,54 @@
         "node": ">=14"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.2.tgz",
+      "integrity": "sha512-ocpz3MxYoZlgsASiVFayiTnKukR8QZDQUMqxMdF0YFLbu8lw/IL6AHKLROI8SOpp6CxpUGPh9Q4a03eBAVEZNQ==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.3",
+        "@floating-ui/utils": "^0.1.5",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -8095,6 +8145,11 @@
         "gunzip-maybe": "bin.js"
       }
     },
+    "node_modules/hangul-romanization": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hangul-romanization/-/hangul-romanization-1.0.1.tgz",
+      "integrity": "sha512-Nh67VGRK0Zet2JRDWII4/RW004XSZyWVySSurM9PEAR1p+7/5Kr8OrrcSYQcQhyGCcBEKyQm98xd+rRnyO0uXg=="
+    },
     "node_modules/happy-dom": {
       "version": "12.10.3",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-12.10.3.tgz",
@@ -14778,6 +14833,11 @@
         "@thednp/dommatrix": "^2.0.5"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
diff --git a/package.json b/package.json
index b23ade801..c36db68d6 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "/postgres-data"
   ],
   "dependencies": {
+    "@floating-ui/react": "^0.26.2",
     "@isaacs/express-prometheus-middleware": "^1.2.1",
     "@popperjs/core": "^2.11.8",
     "@prisma/client": "^5.5.2",
@@ -45,6 +46,7 @@
     "cross-env": "^7.0.3",
     "emittery": "^0.13.1",
     "express": "^4.18.2",
+    "hangul-romanization": "^1.0.1",
     "isbot": "^3.7.0",
     "morgan": "^1.10.0",
     "prom-client": "^15.0.0",