Frontend
Runtime BiDi Structural Verification Catches Right-to-Left Layout Defects that Accessibility, Actionability, and Logical-Property Linting Miss
arXiv cs.SE0 views
arXiv:2610.32934v1 Announce Type: new Abstract: Bidirectional (right-to-left, RTL) layout defects arise when interfaces authored with physical directional CSS (margin-left, border-left, text-align:left) are rendered under dir="rtl" without being mirrored. Accessibility engines (axe-core), actionability engines (Playwright), and even Stylelint's current core logical-property rule fail to localise these defects. We present runtime structural invariants -- a zero-golden mode over computed style and geometry, and a bidi-conservative differential mode -- that catch them in a headless browser. On a held-out benchmark of 14 real RTL bugs reconstructed from dated fix commits in Bootstrap and Material Components Web, the detector recovers 13/14 (2 via zero-golden, 11 via the differential mode), with no false alarm on any patched version; on the actual committed historical bootstrap.rtl.css it catches 1 of 2 attempted. It reports 0 false positives on 16 negative LTR-island cases and, in both modes, on 43 unmodified real components across four design systems and three RTL architectures (rule-of-three 95% upper bound <= 7%), and it surfaced a real directional defect in the current Bulma 1.0.4. By contrast, Stylelint's core rule emits an identical 1744 warnings on Bootstrap's LTR and correct-RTL builds, pseudo-localisation detects none of the mirroring bugs, and a naive pixel mirror-and-diff reaches only F1 0.87 with a test-set-tuned threshold. The two modes are complementary: zero-golden is the sole detector of the decoration/styling-asymmetry class (5/6) but false-flags the correct logical border-inline-end, while the differential detects none of that class yet never false-alarms and is empirically exact on the block-level inset/margin class. We scope this paper to detection; repair is future work.
Source:https://arxiv.org/abs/2610.32934PreviousGreen Code or Costly Code? Evaluating the Energy Costs of Iterative LLM-Based Code OptimizationsNextMICE to Meet You: From Re-ranking Only to End-to-End Retrieval
Related posts
The User Cannot See Which Tab Is Selected, and Their Operating System Deleted Your Gradient
0dev.to CSS
Why I Prefer Lightweight WordPress Development and Custom Code
0dev.to CSS
Constraining agent CSS to design tokens (without pasting the whole theme)
0dev.to CSS
Exporting a Solo site: fixing fonts, image paths and forms by hand
0dev.to CSS
Your AI Coding Agent Needs More Than a Good Prompt
0Hacker News New
How to Migrate WordPress to Next.js Without Losing SEO
0dev.to