阿拉伯语文本传入TanstackTable后括号反转问题求助

问题情况 #

带括号的阿拉伯语文本（例如：صابون ديتول اوريجنال عرض خاص (6×165)جم）在控制台或直接写入HTML元素时显示正常，但传入TanStack Table后括号会出现反转。

已尝试以下渲染方式，均未解决问题：

columnHelper.accessor("extendedDescription", {
  header: theme.isArabic ? "وصف" : "Extended Description",
  cell: (info) => {
    console.log('column Extended Description =>', info.getValue())
    return (
      <Box width={"350px"}>
        // JSON.stringify(info.getValue())  -- 试过此方法
        // <Typography>{info.getValue()}</Typography> -- 试过此方法
        <p>{info.getValue()}</p>
      </Box>
    );
  },
  size: 350,
  enableSorting: false,
}),

可行解决办法 #

方法1：用<bdi>标签隔离文本 #

<bdi>标签可隔离双向文本，避免相邻内容干扰排版。修改cell渲染逻辑：

cell: (info) => {
  return (
    <Box width={"350px"}>
      <p><bdi>{info.getValue()}</bdi></p>
    </Box>
  );
},

方法2：给元素设置dir="auto"属性 #

让浏览器自动识别文本方向，修正括号排版：

cell: (info) => {
  return (
    <Box width={"350px"}>
      <p dir="auto">{info.getValue()}</p>
    </Box>
  );
},

方法3：手动插入双向控制字符 #

通过Unicode左到右标记\u200E强制括号按正确方向显示：

cell: (info) => {
  const fixedText = info.getValue()
    .replace(/\(/g, '\u200E(')
    .replace(/\)/g, ')\u200E');
  return (
    <Box width={"350px"}>
      <p>{fixedText}</p>
    </Box>
  );
},

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