做ppt配图好用的网站,重庆制作网站有哪些,济南手机网站定制费用,招聘网站续费怎么做分录背景
TikTok作为目前全世界最受欢迎的APP#xff0c;需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的#xff0c;在前端有一个专有名字RTL模式#xff0c;即Right-to-Left。
其中以阿拉伯语作为第一语言的人…背景
TikTok作为目前全世界最受欢迎的APP需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的在前端有一个专有名字RTL模式即Right-to-Left。
其中以阿拉伯语作为第一语言的人口超过2.92亿对于这个庞大的市场App、Web网站等都需要考虑RLT布局。那么TailwindCSS应该如何处理RTL布局模式
LTR模式 vs RTL模式
从普通网页中检查发现html上的CSS默认方向是LTR。即页面上的内容是从左往右阅读的。尝试在html标签上设置网页显示方向dir”rtl“
!DOCTYPE html
html dirrtl
/html下面两张图片是LTR模式与RTL模式的展示效果
分析
RTL模式下文字从居左变成居右两个方块左右调换了位置。
TailwindCSS RTL 实战
即然通过设置html标签上dir属性就能够设置RTL那么还需要TailwindCSS做特殊处理吗答案是肯定的有一些情况需要在RTL模式下做特殊的布局。
例如 LTR 模式下设置了左内边距4px在对应的RTL模式下应该转变成右内边距4px实际情况是这样吗
我们做个测试看看
可以看到某个方向的内边距并不会随着dir的改变而改变RTL模式下的文字已经贴边了。
利用TailwindCSS 提供的rtl指令做特殊布局的配置设置形式ltr:xxxx 、 rtl:xxx
现在实现上面的需求 LTR模式设置左内边距RTL模式设置右内边距
重点html标签上必须设置dir属性
div classNameltr:pl-6 rtl:pr-6乐闻世界/div效果符合预期 总结
基于实战情况对于某些dirrtl不能处理的RTL布局通过 **ltr: 、 rtl:** 条件指令定制化的设置这个就是不同的需求需要不同的设置了。
附加信息
上面实战的内边距问题其实TailwindCSS支持了新的样式类ps 、pe、ms、me即设置对应的边距然后也不需要ltr、rtl特殊处理了。
前提是TailwindCSS版本升级到≥3.3.2
相关原创文章推荐
在前端项目中开始使用 TailwindCSSTailwindCSS 如何配置默认单位为pxTailwindCSS 多主题色配置TailwindCSS 支持文本文字超长溢出截断、文字文本省略号TailwindCSS 如何设置 placeholder 的样式TailwindCSS 如何处理RTL布局模式Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果
