rtl和行为级_文本对齐:开始和RTL

rtl和行为级

As you've probably heard me mention a billion times on Twitter, I've been proudly work on the Mozilla Developer Network revamp.  This is my first real experience with working on websites with a fair amount of RTL readers. One thing I quickly recognized when browsing in RTL mode was that text wasn't always lining up on the correct side -- I would see text on the left where the browser should have displayed it on the right.  After digging into the stylesheets, I saw explicit text-align:left directives and started queueing up selectors I'd need to change to text-align: right.  Before doing so, however, I took the time to research a better way...and found it quickly.

正如您可能已经听说过我在Twitter上提到十亿次一样,我一直很自豪地致力于Mozilla开发人员网络的改版。 这是我第一次在拥有大量RTL阅读器的网站上工作的真实经验。 在RTL模式下浏览时,我很快认识到的一件事是,文字并非总是排列在正确的一侧-我会在左侧看到文字,而浏览器应该在右侧显示文字。 深入研究样式表后,我看到了显式的text-align:left指令,并开始排队选择器,我需要将其更改为text-align: right 。 但是,在这样做之前,我花时间研究一种更好的方法……并很快找到了它。


text-align: left; /* as backup */
text-align: start;


text-align: start allows the browser to decide how to best align text based on the user's LTR or RTL preference.  There's also an "end" value if you prefer the text to show up on the right in LTR mode, and visa versa.  Browser support is good at this point, with Internet Explorer supporting this property within IE10.

text-align: start允许浏览器根据用户的LTR或RTL首选项来决定如何最佳地对齐文本。 如果您希望文本在LTR模式下显示在右侧,则还有一个“结束”值,反之亦然。 此时,浏览器支持很好,Internet Explorer在IE10中支持此属性。

Even if RTL isn't a requirement of your website, keep text-align: start in mind -- it's a very simple change that could be a big boost to your RTL visitors!

即使您的网站不需要RTL,也请保持text-align: start记住-这是一个非常简单的更改,对您的RTL访问者来说可能是一个很大的进步!

翻译自: https://davidwalsh.name/text-align-start

rtl和行为级

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值