使用Flexmonster/PivotTable.js实现RTL希伯来语透视表时图表标签反向

• SVG原生<text>元素对direction、unicode-bidi这类双向排版样式的支持存在固有缺陷，当<text>节点应用rotate类旋转变换后，浏览器会强制沿用LTR方向的文本排版逻辑，哪怕给样式加!important也无法触发RTL文本的重排计算，这是当前样式不生效的核心原因。
• Flexmonster、PivotTable.js 的图表层基于SVG渲染，默认不会为希伯来语这类RTL文本主动添加lang="he"属性，浏览器无法自动识别文本的双向排版规则，最终出现词序、字符序反转的显示异常。
• 你当前接触的倾斜标签自带-60度旋转变换，旋转状态下浏览器对RTL文本的宽度计算、锚点定位逻辑完全失效，会进一步放大文本顺序反转的视觉效果。

• 替换原有全局text样式，不要全局匹配所有SVG文本节点，只针对组件图表内的标签类做定向适配，避免影响其他场景的英文、数字类标签排版：

  /* 定向匹配Flexmonster、PivotTable.js的图表标签 */
  .fm-chart svg text.fm-label, .pvt-chart svg text {
    direction: rtl !important;
    /* 替换原有的embed值，用plaintext模式避免与旋转变换冲突 */
    unicode-bidi: plaintext !important;
  }
  

  选择plaintext而非embed的原因是，SVG场景下embed模式的双向隔离逻辑会和旋转变换产生冲突，直接抵消RTL方向的作用；plaintext模式会直接基于文本本身的Unicode双向属性计算排版顺序，不受父级LTR默认方向的干扰。
• 图表渲染完成后，遍历文本节点自动补全语言属性，强制触发浏览器RTL排版逻辑：

  document.querySelectorAll('.fm-chart svg text, .pvt-chart svg text').forEach(node => {
    const text = node.textContent;
    // 匹配希伯来语Unicode字符范围
    const containHebrew = /[\u0590-\u05FF]/.test(text);
    if (containHebrew) {
      node.setAttribute('lang', 'he');
      node.setAttribute('dir', 'rtl');
    }
  })
  

• 对于带旋转角度的倾斜标签，可在组件初始化时开启官方提供的RTL本地化配置，组件会自动适配旋转标签的锚点位置、偏移量计算，从渲染层面修正反转问题，无需手动覆盖transform参数。

内容的提问来源于stack exchange，提问作者Elijah