网页RTL布局适配方案和rtlcss插件在项目中实践

最新推荐文章于 2024-03-25 09:31:07 发布
最新推荐文章于 2024-03-25 09:31:07 发布
阅读量1.8k 收藏 7
点赞数 1
分类专栏： bigo前端 文章标签： css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yeyeye0525/article/details/119104436
版权

file

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

前言

bigo作为全球化的互联网企业，产品体验要求国际化，本地化，所面向的用户来自世界各地，他们在产品使用习惯各有不同。尤其对于使用诸如阿拉伯语、乌尔都语、希伯来语等用户，拥有着庞大的数量群体，他们的阅读习惯与中、英文大为不同，是从右到左的顺序进行阅读，从产品使用上需要兼顾这部分用户需求。为了更好地符合用户习惯，作为一名前端开发，我们更应该在页面针对不同语言进行布局适配，努力地提高用户使用体验。

何为RTL布局

RTL布局通常称为LTR的镜像布局，整体上是与我们日常看到的页面布局对称，从右往左显示内容。例如显示的文字右侧排列，从右向左阅读，导航顺序相反布局，带有方向性的图标镜像显示等。

compare

LTR和RTL布局的主要区别

元素LTRRTL
文本句子从左向右阅读。句子从右向左阅读。
时间线事件序列从左向右进行。事件序列从右向左进行。
图像从左向右的箭头表示向前运动：→从右向左的箭头表示向前运动：←

虽然RTL大体上是镜像布局，但并不是所有地方都需要这样处理，其中有些细节需要注意：

  • 页面交互操作方向同样需要改变方向，例如跑马灯、tab组件，向左滑动代表后退，向右滑动代表前进

115487974-53cd0b80-a28c-11eb-812a-d61e91b99d90.gif

tab

  • 某些图标依然按照原来的方向显示，对于不传递方向性的图标、环形流逝方向、代表右手持有的物体和带有斜杠的图标按原有图案展示即可，无需处理。
    icon

  • 媒体播放按钮和进度指示器反映的是播放方向，依然按LTR方向展示
    mediaplay

总而言之，页面用户体验和界面设计在RTL布局下需要以RTL阅读思维为核心进行设计，了解了RTL布局的特点后接下来总结下现在比较流行常用的页面适配方案

RTL适配方案

direction

最常用的适配方法是在标签中添加dir属性或使用css的属性direction，指定值为rtl

<body dir="rtl">
content
</body>

html {
  direction: rtl;
}

设置后，你能够看到页面的文字从右往左的顺序显示。但某些地方会看上去觉得奇怪，这个css属性对于带有左右方向调整的样式例如left，magin-left等属性无效，需要额外的处理，在RTL里将left修改成right，margin-left修改成margin-rigtht。例如：

.box {
  left: 10px;
  margin-left: 10px;
}

你需要额外添加样式，并进行样式覆盖：

.box {
  left: 10px;
  margin-left: 10px;
}

[dir="rtl"] .box {
  left: 0;
  margin-left: 0;
  right: 10px;
  margin-right: 10px;
}

以下这些css属性在RTL布局需要重新正确地设置：

background-position
background-position-x
border-bottom-left-radius
border-bottom-right-radius
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top-left-radius
border-top-right-radius
border-width
box-shadow
clear
direction
float
left
margin
margin-left
margin-right
padding
padding-left
padding-right
right
text-align
transition
transition-property

另外，direction改变flex和inline-block元素的方向，flex布局适配RTL，在遇到RTL布局的场景下，请尽可能地使用flexbox布局。

transform

另一个简单粗暴的方法是使页面水平翻转，实现水平镜像对称，用到了transform: scaleX(-1)属性。

html {
  transform: scaleX(-1);
}

scale

从上图可以看出，使用scaleX(-1)，页面整体上实现了镜像对称，我们无需在css层面上做过多的细节处理，但相应地文字和图像也翻转了，文字显示上会变得非常奇怪，对于文字要再进行翻转处理一次，涉及文字和非对称的图片也要重新设计。

css逻辑属性

CSS逻辑属性定义：是CSS的一个模块，其引入的属性与值能做从逻辑角度控制布局，而不是从物理、方向或维度来控制。
简单地说，CSS逻辑属性没有左右物理方向性的概念，基于参照物来描述起点和终点，如LTR布局下start代表left方向，end代表right方向，RTL布局下start代表right方向，end代表left方向，从而提供原生能力去适配LTR和RTL布局，前端样式开发无需考虑布局适配问题

如使用margin-inline-start来代替margin-left，在RTL布局里相当于设置了margin-right的效果，我们无需额外兼容，类似的属性还有：

使用不要使用
margin-inline-start: 5px;margin-left: 5px;
padding-inline-end: 5px;padding-right: 5px;
float: inline-start;float: left;
inset-inline-start: 5px;left: 5px;
border-inline-end: 1px;border-right: 1px;
border-{start/end}-{start/end}-radius: 2px;border-{top/bottom}-{left/right}-radius: 2px;
padding: 1px 2px;padding: 1px 2px 1px 2px;
margin-block: 1px 3px; && margin-inline: 4px 2px;margin: 1px 2px 3px 4px;
text-align: start; or text-align: match-parent;text-align: left;

在某些css属性没有对应的逻辑属性的时候，我们还是要单独对RTL布局定义

在LTR布局中显示

.search-box {
  background-image: url(chrome://path/to/searchicon.svg);
  background-position: 7px center;
}

在RTL布局时，添加如下样式进行覆盖

// 需自行在html标签设置dir属性以作区分
[dir="rtl"] .search-box {
  background-position-x: right 7px;
}

然而这些css逻辑属性具有兼容性的问题，大部分的浏览器版本部分属性不支持、IE浏览器完全不支持
logical_properties

查看网站

css in js

该方案是基于css in js的思想，即是使用js来编写css样式，将css和js代码合并在js文件里，常用于jsx组件语法里面。在React组件里，通过定义样式对象来赋予元素样式，实现组件样式，目前比较流行的css in js库有styled-components。

import React from 'react';

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

使用js操作样式的好处是能够在运行时判断是否在rtl语言环境，并相应地修改css样式代码。可以用到styled-components的一个插件stylis-plugin-rtl来处理RTL布局，其背后原理是使用cssjanus库通过js进行rtl样式转换。

import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled.div`
  padding-left: 10px;
`;

function MakeItRTL() {
  return (
    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
      <Box>My padding will be on the right!</Box>
    </StyleSheetManager>
  );
}

less/sass预处理语言

利用css预处理语言的mixin混合指令功能，预先写好混合指令，额外生成RTL布局代码。

@mixin margin-left($val: 0) {
  margin-left: $val;
  [dir='rtl'] & {
    margin-left: initial;
    margin-right: $val;
  }
}

引入公共mixin指令scss文件，在需要的时候使用@inlcude方法

@import '@assets/rtl.scss';

.el {
  border: 1px solid #000;

  @include margin-left(10px);
}

生成后的代码分别适配LTR和RTL布局：

.el {
  margin-left: 10px;
  border: 1px solid #000;
}

[dir='rtl'] .el {
  margin-left: initial;
  margin-right: 10px;
}

使用rtlcss、css-flip转换工具

可以通过css转换工具如rtlcss/css-flip，无需提前写好混合指令，即可输出RTL样式布局代码。它能够根据所写的css代码自动转编译成带有rtl布局的css代码，无需额外大量添加rtl布局的css代码，编译过程中自动帮我们处理，省时省力，提高我们项目开发效率。

原来的样式

.example {
  display:inline-block;
  padding:5px 10px 15px 20px;
  margin:5px 10px 15px 20px;
  border-style:dotted dashed double solid;
  border-width:1px 2px 3px 4px;
  border-color:red green blue black;
  box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;
}

npm install -g rtlcss
rtlcss input.ltr.css output.rtl.css

编译后会转换成

.example {
  display:inline-block;
  padding:5px 20px 15px 10px;
  margin:5px 20px 15px 10px;
  border-style:dotted solid double dashed;
  border-width:1px 4px 3px 2px;
  border-color:red black blue green;
  box-shadow: 1em 0 0.4em gray, -3px 3px 30px black;
}

rtlcss提供丰富的特性来满足适配需求：

1、 Control Directives(控制指令)
控制指令放置在css声明或css语句之间，它能作用于单个或多个节点

  • 忽略属性
.code {
  /*rtl:ignore*/
  direction:ltr;
  /*rtl:ignore*/
  text-align:left;
}
  • 添加额外的样式
  /*rtl:raw:
  #example {
      border-radius: 25px 0 0 25px;
  }
  */
  • 去除属性
div {
  /*rtl:remove*/
  direction: rtl;
  /*rtl:remove*/
  text-align: right;
  padding: 10px;
}
  • 重命名选择器
/*rtl:rename*/
.float-right {
    float: right;
}

//转换后
.float-left {
    float: left;
}

2、Value Directives(值指令)
值指令放置在css声明的值里，它能作用于所包含的声明节点

  • 添加/插入/替换/忽略 属性值
.sample {
  font-family:"Droid Sans", "Helvetica Neue", Arial /*rtl:prepend:"Droid Arabic Kufi",*/;
  direction:ltr /*rtl:ignore*/;
  font-size:16px /*rtl:14px*/;
  transform:rotate(45deg) /*rtl:append:scaleX(-1)*/;
  background: #00FF00 url(bgimage.gif) no-repeat /*rtl:insert:fixed*/ top;
}

// 转换后
.sample {
  font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial;
  font-size: 14px;
  transform:rotate(45deg) scaleX(-1);
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}

更详尽的使用方法可查看官网：https://rtlcss.com/

这里编译后的文件会将LTR相关的属性转换成RTL样式，只保留RTL布局的代码，假如想在一份css文件都存在LTR和RTL布局的样式呢，我们需要用到postcss的插件postcss-rtlcss，结合webpack构建工具，实现自动化添加RTL布局样式

方案比较

方案结论
direction=“rtl”影响了文字排列和布局，需要手动适配的范围大，要尽可能地使用flex和内联块元素进行布局
transform: scaleX(-1)处理简单，布局镜像，但文本和图片显示会有翻转问题
css逻辑属性原生适配，但浏览器兼容性差，部分属性仍需要另外处理，如background-position
css in js适合jsx语法开发，需要基于css in js模式编写，js动态生成css，运行耗时，有性能代价，可读性差
less/scss 预处理语言混合指令特性增加额外rtl样式代码大小，虽然减少了一部分代码编写工作量，但还是要手工引入混合指令处理
rtlcss、css-flip 转换工具增加额外rtl样式代码大小，在构建时自动化生成rtl代码，基本不增加适配开发工作量

rtlcss插件在项目开发中实践

rtlcss方案虽然会增加样式代码，但是不用另外额外增加工作量，构建工具帮我们完成了脏活，也不失为较优方案，下面是使用postcss-rtlcss插件在项目开发中的实践，基于此工具的应用，比平时正常开发项目至少节省了0.5天工作量来处理多语言适配。

首先安装需要的插件

npm i postcss-rtlcss --save-dev

// 将postcss升级到8.0.0版本
npm i postcss@8.0.0 --save-dev

然后在.postcssrc.js文件中添加配置

module.exports = {
  'plugins': {
    'postcss-rtlcss': {} // postcss-rtl插件配置，可以添加插件配置选项
  }
}

基于用户所使用的语言，在html标签设置属性dir为ltr或rtl

const rtlLangs = ['ar', 'ur', 'fa', 'pr'];

if (rtlLangs.includes(navigator.language)) {
  document.documentElement.setAttribute('dir', 'rtl');
} else {
  document.documentElement.setAttribute('dir', 'ltr');
}

这样在webpack打包时就会使用postcss-rtlcss插件进行处理，项目样式无需过多改动

在bigo内部前端旧项目里直接使用postcss-rtlcss插件，可能会遇到以下问题，有可能是postcss-loader版本不兼容造成的：

1、报Error: true is not a PostCSS plugin错误
解决方法：尝试升级postcss-loader到4.2.0版本

2、报this.getOptions is not a function错误
解决方法：尝试降级postcss-loader到4.2.0版本或降级sass-loader版本
https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function

使用该插件其中遇到另一个问题是，假如在项目中使用sass或less语言，直接使用rtlcss的指令注释写法是不生效的
https://rtlcss.com/learn/usage-guide/value-directives/#Tip
https://sass-lang.com/documentation/syntax/comments#in-scss

对于Control Directives语法，需要/*！开头

// 自闭合
.code {
  /*!rtl:ignore*/
  text-align:left;
}

// 区块
.code {
  /*!rtl:begin:ignore*/
  direction:ltr;
  /*!rtl:end:ignore*/
  text-align:left;
}

对于Value Directives语法，需要使用插值语法
SASS/SCSS会忽略放置在声明里的注释，为了确保Value Directives有效需要使用SASS的插值语法

.example {
  text-align: left #{"/*!rtl:ignore*/"};
}

该postcss插件是基于rtlcss插件的基础上封装的，具体的使用方法可以阅读官方文档
https://github.com/elchininet/postcss-rtlcss

总结

RTL的适配方案众多，开发者需要结合项目的需求特点来选取和组合方案，以达到最优选型，因地制宜，目的是最大程度上在提高开发效率，节省开发周期的基础上提高可维护性

相关资料：

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties
https://www.mdui.org/design/usability/bidirectionality.html#bidirectionality-ui-mirroring-overview
https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/
https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/

欢迎大家留言讨论，祝工作顺利、生活愉快！

我是bigo前端，下期见。

bigo前端
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端开源库-postcss-rtl
08-30
前端开源库-postcss-rtlpostss rtl，postss插件用于rtl优化
CSS深度学习 - 文本方向 direction 和 dir
青岑的博客
04-24 4896
dir 与 direction 在 HTML 中，指示元素中文本方向有如下几种方式。 第一种是直接使用 dir 属性去描述，详情 - dir <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">test3</div> ...
推荐开源项目：RTLCSS - 右到左 CSS 样式转换工具
最新发布
gitblog_00070的博客
03-25 307
推荐开源项目：RTLCSS - 右到左 CSS 样式转换工具 项目地址:https://gitcode.com/MohammadYounes/rtlcss RTLCSS 是一个强大且灵活的工具，用于自动转换 CSS（ Cascading Style Sheets）样式表，使其适应右到左（RTL）语言和布局环境，如阿拉伯语、波斯语等。该项目旨在解决在多语言网站开发中遇到的方向性挑战，帮助开发者轻松地...
TailwindCSS 如何处理RTL布局模式
乐闻世界
12-10 258
TikTok作为目前全世界最受欢迎的APP，需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的，在前端有一个专有名字RTL模式，即Right-to-Left。其中以阿拉伯语作为第一语言的人口超过2.92亿，对于这个庞大的市场，App、Web网站等都需要考虑RLT布局。那么TailwindCSS应该如何处理RTL布局模式？
css RTL 从右到左 布局方案
qq_40816144的博客
03-22 1966
一、由于中东地区语言排序是从右往左读写，目前我们使用的从左往右读写恰恰相反，所以为了兼容需调整一下布局机构 二、最常方法是在标签中添加dir属性或使用css的属性direction，指定值为rtl 例如： <html dir="rtl"> </html> html { direction: rtl; } 这种方式简单粗暴，但是前提子元素必须是block级的元素。inline级的元素在rtl中是会导致样式错乱 三、使用css3的 翻转功能 transform: scaleX(
css布局属性与合成属性_如何使用CSS逻辑属性控制布局
Web design 教程小屋
07-09 624
CSS逻辑属性定义了一种处理布局的新方法。 他们的主要目标是帮助开发人员支持不同的书写系统，例如从右至左（RTL）和垂直显示的脚本。 这些新功能可以通过逻辑属性而不是物理属性来控制布局。 例如，具有逻辑性，你可以描述的start和end的元素，而不是它的left和right边界。 看到不同？ 即使您不使用非LTR语言和多方向网站，也值得熟悉新规范。 逻辑属性将有助于建立一种新的哲学，即使用...
rtlcss：用于将级联样式表（CSS）从左至右（LTR）转换为从右至左（RTL）的框架
02-05
RTLCSS RTLCSS是用于将左右（LTR）级联样式表（CSS）转换为从右至左（RTL）的框架。 文献资料 访问 操场 访问 错误和问题 有错误或功能要求吗？ 请随意。 发行说明 要查看最新版本的更改，请参阅 。 支持 RTLCSS为您和您的团队节省了大量时间和精力？
RTL布局
不是CC哥
03-15 772
将布局中的Right Left 改为Start End 代码中关于布局的Right Left 改为Start End 如果强制左右显示，则android:layoutDirection="ltr"
[html] 对于rtl网站的适配有哪些方案？
歌谣的博客
04-01 201
[html] 对于rtl网站的适配有哪些方案？ transform: scaleX(-1) 或 direction: ltr; 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
关于网站左右布局适配
weixin_34254823的博客
05-10 408
缘由 新的一年加入新的公司，新的公司做新的项目。公司涉及到的项目基本都是海外的，没有国内的。做过国际化项目的同学应该知道，世界上每个国家的风俗习惯都不同。对于前端开发来说，就网页布局这方面就有正常的ltr布局，即：从左往右布局。但是在一些国家，比如阿拉伯，希伯来等国家，却有着和我们不一样的习惯，遵从了我们老祖先从右往左的阅读习惯，文字也是从右往左书写的习惯，当然是看不懂的。站在前端的角度就是rtl...
css中东布局rtl_如何将RTL支持添加到Flexbox和CSS网格
Web design 教程小屋
07-09 683
逻辑属性定义了一种新方法，该方法改变了我们在CSS中处理布局的方式。 除其他优点外，它们还使我们能够基于逻辑属性（Flexbox和CSS网格）向布局添加RTL（从右到左）语言支持。 但是首先让我们简要地了解一下逻辑属性如何在CSS中工作。 1.逻辑布局和内容方向 CSS逻辑属性的主要目标是使开发人员能够在writing-mode或direction属性发生更改时轻松翻转布局。 假设...
前端项目-bootstrap-rtl.zip
09-03
前端项目-bootstrap-rtl,Boosttrap 3.x的从右到左（RTL）主题
开源项目！用RTL8367RB打造的五口全千兆交换机-电路方案
04-20
年前事情比较少，做了一个五口全千兆交换机，芯片是RTL8367RB-CG。 家里书房局域网，PC都是千兆口，但是桌上的TP-link8口交换机是百兆的，两台机器对传资料备份的时候，峰值只能在11M/s左右。无奈哥有100G左右的资源...
大联大 友尚Realtek RTL8753BAU + RTL8763BFE蓝牙耳机方案
04-27
大联大 友尚Realtek RTL8753BAU + RTL8763BFE蓝牙耳机方案
RTL8168 完全适配官方驱动.zip
04-01
Linux下RTL8111/RTL8168 完全适配官方驱动. 不是RTL8169通用驱动,RTL8111/8168/8411 Linux通用显卡驱动，（不限于前面型号，通用的GBE Ethernet都可用） RTL8111B/RTL8111C/RTL8111D/RTL8111E/RTL8111F/RTL8111G(S)...
bootstrap4-rtl:rtl bootsrap 4的插件，方法很简单
05-20
*的简单RTL插件，您可以使用官方版本CSS或CSS Bootstrap 4，并在其下面添加rtl usage:<!-- Original Bootstrap 4.5 -->< link rel =" stylesheet " href =" bootstrap.css " ><!-- OR SCSS version -...
基于Realtek RTL8763BOM 混合蓝牙音箱体的设计方案-电路方案
04-20
RT8763B系列的单片机蓝牙Mono(RTL8763BM)和立体声音频解决方案(RTL8763BF / BFR RTL8763BS, RTL8763BA)应用程序。 RT8763B由一只ARM核心和一种超低能耗的DSP核心与高效的计算能力,高性能音频编解码器,电源管理单元,...
当后端给我返回了302状态码
热门推荐
yeyeye0525的博客
09-19 1万+
主要的作用就是当后端响应的内容是html的时候，跳转到登录页面。这种方案让我感觉有点别扭，于是具体了解了这段代码出现的原因。功能的核心在于用户鉴权，后端设想的方案是：当前端发起接口请求，后端识别到用户未登录的时候，就会给前端响应302的状态码，以为很方面，前端不用处理就直接跳转到了登录页面。然而，他们不知道的是，前端发起的ajax请求，并不能直接跳转，甚至连302状态码都捕获不到。
JSON Schema入门和应用
yeyeye0525的博客
03-04 3455
本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 JSON Schema入门和应用 何为JSON Schema？ JSON数据格式对于web开发者都为所熟悉，在平时的开发中离不开它，例如前后端数据传输格式，webpack配置文件，对象序列化等实际应用场景，通常都以JSON格式定义和储存。它以简洁易懂的结构、体积小的优点得以在各类编程语言中广泛流行。 那么什么是JSON Schema? JSON Schema其实是对json数据格式的描述和规范，是对.
下载进度条RTL适配
08-12
你想要实现一个从右向左（RTL）的下载进度条适配，对吗？要实现这个功能，你需要进行以下步骤： 1. 确定你使用的编程语言和界面库，比如Java、Python或者JavaScript。不同的语言和库可能有不同的实现方式。 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值