TailwindCSS 如何处理RTL布局模式

背景

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 dir="rtl">
</html>

下面两张图片是LTR模式与RTL模式的展示效果
TailwindCSS 如何处理RTL布局模式
TailwindCSS 如何处理RTL布局模式

分析

RTL模式下文字从居左变成居右;两个方块左右调换了位置。

TailwindCSS RTL 实战

即然通过设置html标签上dir属性就能够设置RTL,那么还需要TailwindCSS做特殊处理吗?答案是肯定的,有一些情况需要在RTL模式下做特殊的布局。

例如 LTR 模式下设置了左内边距4px,在对应的RTL模式下应该转变成右内边距4px,实际情况是这样吗?

我们做个测试看看
TailwindCSS 如何处理RTL布局模式
TailwindCSS 如何处理RTL布局模式

可以看到,某个方向的内边距并不会随着dir的改变而改变,RTL模式下的文字已经贴边了。

利用TailwindCSS 提供的rtl指令做特殊布局的配置,设置形式ltr:xxxxrtl:xxx

现在实现上面的需求: LTR模式设置左内边距,RTL模式设置右内边距;

重点:html标签上必须设置dir属性;

<div className="ltr:pl-6 rtl:pr-6">乐闻世界</div>

效果符合预期

TailwindCSS 如何处理RTL布局模式
TailwindCSS 如何处理RTL布局模式

总结

基于实战情况,对于某些dir=rtl不能处理的RTL布局,通过 **ltr:rtl:** 条件指令定制化的设置,这个就是不同的需求需要不同的设置了。

附加信息

上面实战的内边距问题,其实TailwindCSS支持了新的样式类,ps 、pe、ms、me即设置对应的边距,然后也不需要ltr、rtl特殊处理了。

前提是TailwindCSS版本升级到≥3.3.2

相关原创文章推荐

  • 在前端项目中开始使用 TailwindCSS
  • TailwindCSS 如何配置默认单位为px
  • TailwindCSS 多主题色配置
  • TailwindCSS 支持文本文字超长溢出截断、文字文本省略号
  • TailwindCSS 如何设置 placeholder 的样式
  • TailwindCSS 如何处理RTL布局模式
  • Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 获取windows 系统开关机时间

关机时间&#xff0c;引用&#xff1a;https://www.coder.work/article/1589448 public static DateTime GetLastSystemShutdown() { string sKey "System\CurrentControlSet\Control\Windows"; Microsoft.Win32.RegistryKey key …

建立个人学习观|地铁上的自习室

作者&#xff1a;向知 如果大家有机会来北京&#xff0c;可以来看看工作日早上八九点钟&#xff0c;15 号线从那座叫“顺义”的城市通向“望京”的地铁&#xff0c;你在那上面&#xff0c;能看到明明白白的&#xff0c;人们奔向梦想的模样。 一、地铁上的自习室 我在来北京之前…

华为数据之道学习笔记】3-5 规则数据治理

在业务规则管理方面&#xff0c;华为经常面对“各种业务场景业务规则不同&#xff0c;记不住&#xff0c;找不到”“大量规则在政策、流程等文件中承载&#xff0c;难以遵守”“各国规则均不同&#xff0c;IT能否一国一策、快速上线”等问题。 规则数据是结构化描述业务规则变量…

【算法集训】基础数据结构:三、链表

链表就是将所有数据都用一个链子串起来&#xff0c;其中链表也有多种形式&#xff0c;包含单向链表、双向链表等&#xff1b; 现在毕竟还是基础阶段&#xff0c;就先学习单链表吧&#xff1b; 链表用头结点head表示一整个链表&#xff0c;每个链表的节点包含当前节点的值val和下…

2024 年顶级的 Android 系统修复软件与方法

您是否正在寻找可以修复 PC 上 Android 操作系统的工具&#xff1f;这是我们精选的最好的 Android 系统修复软件&#xff01; Android 是世界著名的智能手机操作系统。全世界有数百万人使用这个操作系统&#xff0c;这使得它安全可靠。然而&#xff0c;这仍然不能使它完美无缺…

048:利用vue-video-player播放m3u8

第048个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

普冉(PUYA)单片机开发笔记(6): 呼吸灯

概述 上一篇的实验中&#xff0c;分别正确地配置了 TIM16 和 TIM1&#xff0c;TIM16 的中断服务程序中每隔 500ms 翻转板载 LED 一次&#xff1b;TIM1 的 CHANNEL_1 用于输出一个固定占空比的 PWM 信号。这一次我们进一小步&#xff1a;使用 TIM16 的中断设置 TIM1 CHANNEL_1 …

MyBatis进阶之分页和延迟加载

文章目录 分页1. RowBounds 分页2. PageHelper 分页3. PageInfo 对象属性描述 延迟加载立即加载激进式延迟加载真-延迟加载 分页 Mybatis 中实现分页功能有 3 种途径&#xff1a; RowBounds 分页&#xff08;不建议使用&#xff09;Example 分页&#xff08;简单情况可用)Pag…

关于对向量检索研究的一些学习资料整理

官方学习资料 主要是的学习资料是&#xff0c; 官方文档 和官方博客。相关文章还是挺多 挺不错的 他们更新也比较及时。有最新的东西 都会更新出来。es scdn官方博客 这里简单列一些&#xff0c;还有一些其他的&#xff0c;大家自己感兴趣去看。 什么是向量数据库 Elasticse…

文件加密软件哪个最好用 好用的文件加密软件推荐

一说到文件加密软件&#xff0c;可能大家都会去搜一些不知名的软件来&#xff0c;但是选择这种加密软件&#xff0c;最好还是要看一些资质的。 资质不好的&#xff0c;可能加密过后你自己也打不开文件&#xff0c;&#xff08;ps&#xff1a;我自己就遇到过这种情况&#xff09…

【华为OD机试python】分苹果【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 A、B两个人把苹果分为两堆,A希望按照他的计算规则等分苹果, 他的计算规则是按照二进制加法计算,并且不计算进位 12+5=9(1100 + 0101 = 9), B的计算规则是十进制加法,包括正常进位,…

基于Java SSM框架高校校园点餐订餐系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架高校校园点餐订餐系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&a…

(一)Java 基础语法

目录 一. 前言 二. Hello World 三. Java 语法 3.1. 基本语法 3.2. Java 标识符 3.3. Java 修饰符 3.4. Java 变量 3.5. Java 数组 3.6. Java 枚举 3.7. Java 关键字 3.8. Java 注释 3.9. Java 空行 3.10. Java 继承 3.11. Java 接口&#xff08;interface&#…

Oracle(2-14)User-Managed Incomplete Recovery

文章目录 一、基础知识1、Incomplete Recovery Overview 不完全恢复概述2、Situations Requiring IR 需要不完全恢复的情况3、Types of IR 不完全恢复的类型4、IR Guidelines 不完全恢复指南5、User-Managed Procedures 用户管理程序6、RECOVER Command Overview 恢复命令概述7…

算法训练营Day8(字符串)

344.反转字符串 344. 反转字符串 - 力扣&#xff08;LeetCode&#xff09; class Solution {public void reverseString(char[] s) {for(int i 0,j s.length-1;i< s.length/2 ; i,j--){swap(s,i,j);}}public void swap(char[] s,int i,int j ){char temp s[i];s[i] s[j]…

Python数据科学视频讲解:Python注释

2.3 Python注释 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解2.3节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括数据科学应用和…

20231210原始编译NanoPC-T4(RK3399)开发板的Android10的SDK

20231210原始编译NanoPC-T4(RK3399)开发板的Android10的SDK 2023/12/10 17:27 rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ mkdir nanopc-t4 rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ cd nanopc-t4/ …

python4E 之 Dict 找到两个不同索引但都需要对应的值。

找到两个不同索引但都需要&#xff0c;对应的值。 df pd.DataFrame(np.random.randint(1, 10, [3,3]), columns list(ABC)) 通过 dict 制造key index_htable{} for _,row in idc.iterrows(): #按行循环 key str(row[u股票代码]) | str(row[u日期]) #根据不同 的索引…

45.0/HTML 简介(详细版)

目录 45.1 互联网简介 45.2 网页技术与分类 45.3 HTML 简介 45.3.1 什么是 HTML?(面试题) 45.3.2 HTML 文件结构 45.3.3 HTML 语法 45.3.4 实例演练步骤(面试题) 45.4 head 中的常用标签 45.4.1 title 标记 45.4.2 meta 标记 45.4.3 45.4.4 45.4.4(面试题)总结: 45…

【AIE】AIE微信合集

AIE微信合集 AIE(1) 对于Versal&#xff0c;我们从系统角度看&#xff0c;可将其分为3个Domain&#xff1a;AIE、PS和PL&#xff0c;如下图所示。如果要运行一个AIE的应用&#xff0c;绝大多数情况下&#xff0c;这3个Domain我们都会用到&#xff0c;使其协同工作。这里我们仅…