《互联网产品的客户端架构·规模化与架构演进》9.2 RTL、排版与本地内容

// file: src/i18n/rtl-layout.ts
// tier: L1
// verify: node --test test/i18n/rtl-layout.test.ts

export type Direction = "ltr" | "rtl";

export type DirectionInput = Direction | "auto";

export type LogicalEdge = "inline-start" | "inline-end" | "block-start" | "block-end";

export type PhysicalEdge = "left" | "right" | "top" | "bottom";

export type BidiClass = Direction | "neutral" | "mixed";

export type IconKind = "directional" | "neutral" | "brand";

export type MirrorAction = "mirror" | "keep";

export type BidiPart = {
  text: string;
  direction: Direction;
};

export type DirectionAttributes = {
  dir: Direction;
  align: "start" | "end";
};

const RTL_LANGUAGES = new Set<string>([
  "ar",
  "he",
  "fa",
  "ur",
  "ps",
  "sd",
  "ug",
  "yi",
  "dv",
  "ku",
  "ckb",
  "nqo",
]);

const RTL_SCRIPTS = new Set<string>([
  "arab",
  "hebr",
  "thaa",
  "nkoo",
  "adlm",
  "syrc",
  "samr",
  "mand",
]);

const LTR_SCRIPTS = new Set<string>([
  "latn",
  "cyrl",
  "grek",
  "hans",
  "hant",
  "jpan",
  "kore",
  "deva",
  "beng",
  "guru",
  "gujr",
  "orya",
  "taml",
  "telu",
  "knda",
  "mlym",
  "sinh",
  "thai",
  "lao",
  "tibt",
  "mymr",
  "geor",
  "armn",
  "ethi",
]);

const DIRECTIONAL_ICONS = new Set<string>([
  "arrow-left",
  "arrow-right",
  "chevron-left",
  "chevron-right",
  "back",
  "forward",
  "next",
  "previous",
  "undo",
  "redo",
  "indent-increase",
  "indent-decrease",
  "reply",
  "send",
  "list-ordered",
  "text-align-left",
  "text-align-right",
]);

const BRAND_ICONS = new Set<string>([
  "github",
  "wechat",
  "alipay",
  "google",
  "apple",
  "x",
]);

const LETTER = /\p{L}/u;

function isRtlCodePoint(code: number): boolean {
  return (
    (code >= 0x0590 && code <= 0x08ff) ||
    (code >= 0xfb1d && code <= 0xfdfd) ||
    (code >= 0xfe70 && code <= 0xfefc)
  );
}

export function directionForLocale(locale: string): Direction {
  const tags = locale.trim().toLowerCase().split(/[-_]/).filter((tag) => tag.length > 0);
  if (tags.length === 0) return "ltr";
  if (tags.some((tag) => LTR_SCRIPTS.has(tag))) return "ltr";
  if (tags.some((tag) => RTL_SCRIPTS.has(tag))) return "rtl";
  if (RTL_LANGUAGES.has(tags[0])) return "rtl";
  return "ltr";
}

export function resolveDirection(locale: string, explicit: DirectionInput = "auto"): Direction {
  return explicit === "auto" ? directionForLocale(locale) : explicit;
}

export function propagateDirection(parent: Direction, child: DirectionInput = "auto"): Direction {
  return child === "auto" ? parent : child;
}

export function logicalToPhysical(edge: LogicalEdge, direction: Direction): PhysicalEdge {
  switch (edge) {
    case "inline-start":
      return direction === "rtl" ? "right" : "left";
    case "inline-end":
      return direction === "rtl" ? "left" : "right";
    case "block-start":
      return "top";
    case "block-end":
      return "bottom";
  }
}

export function physicalToLogical(edge: PhysicalEdge, direction: Direction): LogicalEdge {
  switch (edge) {
    case "left":
      return direction === "rtl" ? "inline-end" : "inline-start";
    case "right":
      return direction === "rtl" ? "inline-start" : "inline-end";
    case "top":
      return "block-start";
    case "bottom":
      return "block-end";
  }
}

export function logicalBoxStyle(side: "margin" | "padding", start: string, end: string): string {
  return `${side}-inline-start:${start};${side}-inline-end:${end};`;
}

export function iconKind(name: string): IconKind {
  const key = name.trim().toLowerCase();
  if (BRAND_ICONS.has(key)) return "brand";
  if (DIRECTIONAL_ICONS.has(key)) return "directional";
  return "neutral";
}

export function mirrorIcon(name: string, direction: Direction): MirrorAction {
  if (direction === "ltr") return "keep";
  return iconKind(name) === "directional" ? "mirror" : "keep";
}

export function mirrorScaleX(direction: Direction, action: MirrorAction): string {
  return direction === "rtl" && action === "mirror" ? "scaleX(-1)" : "none";
}

function charDirection(char: string): Direction | "neutral" {
  if (!LETTER.test(char)) return "neutral";
  const code = char.codePointAt(0) ?? 0;
  return isRtlCodePoint(code) ? "rtl" : "ltr";
}

export function firstStrongDirection(text: string): Direction | "neutral" {
  for (const char of text) {
    const direction = charDirection(char);
    if (direction !== "neutral") return direction;
  }
  return "neutral";
}

export function lastStrongDirection(text: string): Direction | "neutral" {
  const chars = [...text];
  for (let index = chars.length - 1; index >= 0; index -= 1) {
    const direction = charDirection(chars[index]);
    if (direction !== "neutral") return direction;
  }
  return "neutral";
}

export function classifyBidi(text: string): BidiClass {
  let hasLtr = false;
  let hasRtl = false;
  for (const char of text) {
    const direction = charDirection(char);
    if (direction === "ltr") hasLtr = true;
    if (direction === "rtl") hasRtl = true;
  }
  if (hasLtr && hasRtl) return "mixed";
  if (hasRtl) return "rtl";
  if (hasLtr) return "ltr";
  return "neutral";
}

export function isolateBidi(text: string, direction: Direction): string {
  const open = String.fromCharCode(direction === "rtl" ? 0x2067 : 0x2066);
  const close = String.fromCharCode(0x2069);
  return `${open}${text}${close}`;
}

export function isolateAuto(text: string): string {
  return `${String.fromCharCode(0x2068)}${text}${String.fromCharCode(0x2069)}`;
}

export function safeConcat(parts: BidiPart[]): string {
  return parts.map((part) => isolateBidi(part.text, part.direction)).join("");
}

export function bidiBoundaryRisk(left: string, right: string): boolean {
  const before = lastStrongDirection(left);
  const after = firstStrongDirection(right);
  return before !== "neutral" && after !== "neutral" && before !== after;
}

export function directionAttributes(direction: Direction): DirectionAttributes {
  return { dir: direction, align: "start" };
}