S1.02.4Bidirectional inline text设计

数字与拉丁文片段在行内保持从左至右

别名: 双向文本 · BiDi 文本 · LTR 行内片段

概念解释

双向行内文本(bidirectional inline text,常简称 BiDi)指一段文字拥有从右至左的基础方向,同时包含拉丁文字、数字或其他方向性质不同的字符。拉丁文字通常形成从左至右的强方向片段;数字属于弱方向字符,会在双向算法中获得显示层级。网址、路径和代码还混有大量标点,不能笼统当作天然稳定的从左至右片段。页面方向改变的是视觉排列,不应反转字符的逻辑存储顺序。

机制

Unicode 双向算法根据段落基础方向、强方向字符、数字等弱类型、中性字符、隔离范围及括号配对规则计算嵌入层级,再由层级决定视觉次序。数字内部通常保持可读顺序,但正负号、货币符号、斜杠和括号各有不同的双向类别;在方向边界上,完整标识符可能被分成视觉上意外的片段。若开发者反转字符串、插入空格或滥用方向覆盖来“修正”外观,逻辑数据与显示脱节,光标移动、选择、复制、解析和辅助技术读取都会受损。

边界

“数字可读顺序保持稳定”不代表整个数字表达都脱离语境。货币符号、正负号、百分号、分隔符和单位既受地区格式影响,也参与双向解析;阿拉伯语环境还可能采用不同数字集。富文本标记、纯文本交换和程序源代码的可用机制不同。不可见双向控制符还可能让代码或标识符显示顺序与逻辑顺序不一致,产生冒充与审查风险,因此隔离不能替代对不受信输入的检测和可视化。

怎么落地

  • 依赖平台的 Unicode BiDi 实现,不反转字符串,也不靠空格或方向覆盖硬改视觉顺序。
  • 在 HTML 等富文本中优先使用语义标记与 CSS:未知方向的动态片段可用隔离元素和自动方向,已知标识符可显式声明方向;纯文本交换才使用相应 Unicode 隔离控制。
  • 把用户名、电话号码、网址、路径和代码作为完整片段分别测试;不要假设其中标点会自动形成一个稳定的从左至右运行。
  • 用本地数字与地区格式化工具生成日期、金额和单位,再把完整结果嵌入句子。
  • 在真实 RTL 句子中测试光标移动、选择、复制粘贴和屏幕阅读;覆盖括号、斜杠、正负号及片段位于句首句尾的情况,并检查不受信文本中的方向控制符。

延伸

  • 同组S1.02.1 镜像的对象是布局与方向,不是全部图形 · S1.02.2 表达时间与进度的图标需镜像 · S1.02.3 具有物理指向的图标不镜像 · S1.02.5 动效方向与手势方向需同步镜像
  • 相邻S2.01 日期与时间格式 · S2.02 数字、小数与千分位
  • 站内检索Unicode Bidirectional Algorithm · bidi isolation · paired bracket algorithm

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/S1.02.4