假设有一段代码,如下所示:

<div dir="rtl">
  test 50%
</div>

它呈现为test 50%.但根据阿拉伯语的这个wiki page,它应该显示为%50 test.注意:百分号在数字之前. 问题如下:如何强制执行所需的行为?浏览器支持OOB吗?有没有已知的方法可以轻松做到这一点?

UPD.我会提供更多的背景信息.有一个具有输入文本特性的Angular 组件.让我们假设它可能如下所示:

<component [label]="'test 50%'"></component>

则其模板如下所示:

<span>{{label}}</span>

它在从左到右模式下工作正常.但当启用从右向左模式时,文本会右对齐,但浏览器不会修改文本.我认为它可能会被浏览器自动修改的原因是,如下所示的文本test this!被浏览器自动修改为!test this.

我是否需要修改组件以使其接受已修改的RTL文本?

推荐答案

根据MDN docs:

全局属性dir是一个枚举属性,用于指示元素文本的方向性.

这意味着它将更改文本的呈现方向,但不会更改构建句子的顺序,除非它位于句子的开头/结尾处.

你可能会注意到,在上面的图片中,?实际上在第一句话中被移到了左边.那是因为它是bidi neutral character.然而,对于单词lef?t或句子的任何其他部分中的?则不存在相同的含义.

Html相关问答推荐

HTML::Element endtag为br和IMG生成结束标签>

如何让一个动态列表以网格方式水平显示

使用tauri构建的Next.js应用程序不显示我的404页面

Tumblr博客:如何修复提交页面和询问页面框列计数问题?

为什么在添加文本时网格区域会调整大小?

我应该怎么做才能显示出整个字符串?

如何从多个TO中获取一个范围标记以溢出其父标记

如何制作';在第';页中搜索;是否发现多个元素中的单词?

如何使背景图像在面包屑中相互重叠

按钮位于主 div 的底部而不是内部 Div

当悬停时,同时影响相邻的两侧div

为什么每当我调整图片大小时它都会使我的其他元素移动

导航丸被选中(活动),但内容未显示.怎么会?

如何使 Shiny 中的 selectInput Select 扩展到井面板之外或以其他方式使它们更容易被用户看到?

如何在没有容器的情况下沿基线将 div 中的元素居中?

如何使我的下拉菜单响应?

在 jinja 模板内的 html 表中嵌套 For 循环

圆形边框显示在该部分后面.怎么修?

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列