{"ns":"fontprobe","title":"Cross-site Font Probe","version":"1.0","summary":"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.","personas":[{"name":"Front-end developer","need":"See which fonts exist and where text is cut off on a given device."},{"name":"QA engineer","need":"Compare measurements across platforms and trust that every table is internally consistent."}],"goals":["Measurements run in the visitor's real browser and finish quickly.","Every table is internally consistent on any platform: counts add up and statuses match their numbers."],"features":[{"id":"STS","title":"Status and tabs","summary":"Measurement status, environment detection and the three-tab layout.","reqs":[{"id":"FR-STS-01","weight":"Must","text":"The probe finishes measuring and reports the real operating system and browser.","accept":["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)"]},{"id":"FR-STS-02","weight":"Should","text":"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.","accept":["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"]},{"id":"FR-STS-03","weight":"Could","text":"The legacy path /fontprobe/font-probe.html serves the same probe."}]},{"id":"TRN","title":"Truncation measurements","summary":"Two 420 px single-line boxes holding the same Vietnamese sample.","reqs":[{"id":"FR-TRN-01","weight":"Must","text":"Both boxes (1A, 1B) hold the same 474-code-point text and report Visible, Cut and Total so that Visible + Cut = Total.","accept":["Total is 474 in both rows","Visible + Cut = 474 in each row; Visible > 0 and Cut > 0"]},{"id":"FR-TRN-02","weight":"Should","text":"Box 1B uses Arial with text-overflow: ellipsis and ends with an ellipsis; box 1A is hard-clipped with no ellipsis.","accept":["Both are 420 px wide, single line, overflow hidden"]},{"id":"FR-TRN-03","weight":"Could","text":"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."}]},{"id":"FNT","title":"Font availability and stacks","summary":"Which fonts are installed and how CSS stacks resolve.","reqs":[{"id":"FR-FNT-01","weight":"Must","text":"Five fonts are probed (Segoe UI, Segoe UI Emoji, Liberation Sans, Noto Color Emoji, Arial) and each row's status matches its measured delta.","accept":["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"]},{"id":"FR-FNT-02","weight":"Should","text":"Table 2B resolves the stacks system-ui, sans-serif, \"Segoe UI\" and Arial, each with its computed family and an advance width.","accept":["Advance width values end in \" px\", have two decimals and are greater than 0"]}]},{"id":"FLG","title":"Flag measurements","summary":"Country-code rows, overflow checks and flag glyph widths.","reqs":[{"id":"FR-FLG-01","weight":"Should","text":"Seven 150 px country-code rows are listed and measured; each status follows scrollWidth against clientWidth.","accept":["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"]},{"id":"FR-FLG-02","weight":"Should","text":"Table 3C compares the Vietnam flag glyph with the letters \"VN\" and its arithmetic is exact.","accept":["Reads width(flag) = X px · width(\"VN\") = Y px · Δ = Z px with Z = X - Y within 0.01"]},{"id":"FR-FLG-03","weight":"Could","text":"The 56 px readonly \"Country code\" input (value Vietnam flag + \"+84\") cannot be edited and reports its own overflow.","accept":["Status \"scrollWidth A / clientWidth B → ok\" or \"truncated\", consistent with A <= B meaning ok","Typing does not change the value"]}]}],"nfr":[{"id":"NFR-01","weight":"Should","text":"Every measurement table is internally consistent on any OS and browser: relationships between numbers hold even though absolute pixel values legitimately differ per platform."}],"outOfScope":["Absolute pixel values (they differ per platform)"]}