Superapp / Product requirements / fontprobe

Cross-site Font Probe — product requirements

Version 1.04 features12 requirements3 Must Open appJSONMarkdown

Cross-site Font Probe is an in-browser diagnostic that measures, on the visitor's own device, how text and flag emoji render: it detects the operating system and browser, counts truncated characters, checks which fonts are installed, resolves CSS font stacks and measures flag glyph widths and overflow. Results are shown on three tabs.

Problem. Teams shipping multilingual interfaces need to know whether fonts and emoji render and fit the same way across operating systems and browsers, using real measurements rather than assumptions.

Users

Goals

Out of scope

Contents

Status and tabs

Measurement status, environment detection and the three-tab layout.

FR-STS-01
Must
The probe finishes measuring and reports the real operating system and browser.
  • Header "Font probe"; status starts as "Đang đo…"
  • Within 5 s the status reads "Đo xong · <OS> · <Browser>" in green, matching the actual platform (for example macOS · Chrome)
FR-STS-02
Should
Tabs "1 · Truncation", "2 · Fonts" and "3 · Flags" follow the ARIA tab pattern: exactly one panel is visible and aria-selected tracks the active tab.
  • Tab 1 is selected on load with panels 2 and 3 hidden
  • Selecting tab 2 shows panel "2A · Font availability" only; tab 3 shows only panel 3
FR-STS-03
Could
The legacy path /fontprobe/font-probe.html serves the same probe.

Truncation measurements

Two 420 px single-line boxes holding the same Vietnamese sample.

FR-TRN-01
Must
Both boxes (1A, 1B) hold the same 474-code-point text and report Visible, Cut and Total so that Visible + Cut = Total.
  • Total is 474 in both rows
  • Visible + Cut = 474 in each row; Visible > 0 and Cut > 0
FR-TRN-02
Should
Box 1B uses Arial with text-overflow: ellipsis and ends with an ellipsis; box 1A is hard-clipped with no ellipsis.
  • Both are 420 px wide, single line, overflow hidden
FR-TRN-03
Could
Box 1A begins "Tiếng Việt có dấu: Người dùng đăng nhập…" and Visible values are integers that may differ between 1A and 1B because the font families differ.

Font availability and stacks

Which fonts are installed and how CSS stacks resolve.

FR-FNT-01
Must
Five fonts are probed (Segoe UI, Segoe UI Emoji, Liberation Sans, Noto Color Emoji, Arial) and each row's status matches its measured delta.
  • MISSING rows show "Δ 0.00" in red; AVAILABLE rows show a non-zero Δ in green
  • On macOS Segoe UI and Segoe UI Emoji are MISSING and Arial is AVAILABLE; on Windows Segoe UI is AVAILABLE
FR-FNT-02
Should
Table 2B resolves the stacks system-ui, sans-serif, "Segoe UI" and Arial, each with its computed family and an advance width.
  • Advance width values end in " px", have two decimals and are greater than 0

Flag measurements

Country-code rows, overflow checks and flag glyph widths.

FR-FLG-01
Should
Seven 150 px country-code rows are listed and measured; each status follows scrollWidth against clientWidth.
  • 3A rows: Việt Nam +84, United States +1, Japan +81, South Korea +82, Singapore +65, Germany +49, Brazil +55, each with its flag
  • 3B has 7 rows; Status is "truncated" exactly when scrollWidth > clientWidth, otherwise "ok"
  • At least United States and South Korea are truncated at 150 px
FR-FLG-02
Should
Table 3C compares the Vietnam flag glyph with the letters "VN" and its arithmetic is exact.
  • Reads width(flag) = X px · width("VN") = Y px · Δ = Z px with Z = X - Y within 0.01
FR-FLG-03
Could
The 56 px readonly "Country code" input (value Vietnam flag + "+84") cannot be edited and reports its own overflow.
  • Status "scrollWidth A / clientWidth B → ok" or "truncated", consistent with A <= B meaning ok
  • Typing does not change the value

Non-functional requirements

NFR-01
Should
Every measurement table is internally consistent on any OS and browser: relationships between numbers hold even though absolute pixel values legitimately differ per platform.