如何将 CSS 文件中的 LTR(从左到右)属性和值转换为 RTL 对应项，反之亦然 [英] How to convert LTR(left to right) properties and values in a CSS file to RTL counterparts and vice-versa

问题描述

我有很多 CSS 文件是为从左到右的网站制作的

I have many CSS files that are made for websites which are left-to-right

我想创建一个可以将 LTR 属性和值转换为 RTL 对应物的 php 函数

I want to create a php function that can convert the LTR properties and values to their RTL counterparts

我之所以要这样做，是因为网站一直在开发中，它有几十个页面和 css 文件，很难跟踪所有这些

The reason why I want to do this is because the website is always under development and it have tens of pages and css files and it's very hard to keep track on all of them

这个功能的目的是自动转换CSS文件，这样网站的RTL版本会更容易

The purpose of this function is to automatically convert CSS files, so it would be easier to make RTL version of the website

例如:

// This is the content of the css file:
$content = '
html, body {
  direction: ltr;
}
#element1 {
  padding:   1px 2px  3px 4px;
  margin-right: 3em;
  background-position: 5%   80%;
  background-image: url(image.png);
  cursor: ne-resize;
  text-align: left; /* 1 */
}
#element2 {
  background: url(image.gif) 5% 80%;
  text-align: right; /* 2 */
  border-left: 1px solid #000;
}
';

$content = convertCSStoRTL($content);

// The output - This is what i want it to become after the function is applied to the content of the css file:
$content = '
html, body {
  direction: rtl;
}
#element1 {
  padding: 1px 4px 3px 2px;
  margin-left: 3em;
  background-position: 95% 80%;
  background-image: url(image.png);
  cursor: nw-resize;
  text-align: right; /* 1 */

}
#element2 {
  background: url(image.gif) 95% 80%;
  text-align: left; /* 2 */
  border-right:  1px solid #000;
}
';

我怎样才能(以最简单的方式)在 PHP 中做到这一点?

How can I do that (in the easiest way) in PHP ?

推荐答案

以下 SCSS 导入添加了一些有用的变量、函数和 mixin.

The following SCSS import adds some useful variables, functions, and mixins.

在 GitHub 上查看

阅读更多

// Override default value for $dir in directional.scss
$dir: rtl;

// Import helpers from directional.scss
@import "directional";

// Use the helpers to make CSS for LTR or RTL
body {
    text-align: $left;
    padding-#{$right}: 1em;
    margin: dir-values(0 2em 0 1em) if-ltr(!important);
}

这篇关于如何将 CSS 文件中的 LTR(从左到右)属性和值转换为 RTL 对应项，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！