如何将 CSS 文件中的 LTR（从左到右）属性和值转换为 RTL 对应项，反之亦然答案

【问题标题】：How to convert LTR(left to right) properties and values in a CSS file to RTL counterparts and vice-versa如何将 CSS 文件中的 LTR（从左到右）属性和值转换为 RTL 对应项，反之亦然
【发布时间】：2012-09-13 16:30:19
【问题描述】：

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

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

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

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

例如：

// 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 中做到这一点（以最简单的方式）？

【问题讨论】：

What have you tried?

标签： php css right-to-left

【解决方案1】：

我认为，如果您尝试依赖正则表达式/str_replace 来修改您的 CSS，那么您将会受到伤害。我的建议是让 PHP 生成 2 个不同的文件，而不是获取一个并生成其镜像，尤其是当您考虑诸如边框之类的属性而不仅仅是对齐时。

我还没有实际测试过这个，但它应该让你知道如何处理它

<?php
$ltr = true;
function doLTR($left, $right, $property = FALSE) {
    @global $ltr;

    $direction = $ltr ? $left : $right;
    if (!$property) {
        print $direction;
    } else {
        print $direction . ': ' . $property;
    }
}
?>

.test {
    border: 1px solid;
    <?php doLTR('margin-left', 'margin-right', '10px'); ?>
    <?php doLTR('text-align: left', 'text-align: right'); ?>
}

如果$ltr = true，理论上你应该得到这个输出：

.test {
    border: 1px solid;
    margin-left: 10px;
    text-align: left;
}

如果它是假的（rtl），你会得到这个：

.test {
    border: 1px solid;
    margin-right: 10px;
    text-align: right;
}

可能值得考虑使用像 Sass 或 LESS 这样的 CSS 预处理器来为您完成这类繁重的工作，因为这是他们最擅长的。

【讨论】：

感谢您的快速回放 :)，但您并没有完全理解我想要什么，您在回放中这样做的方式确实会给我带来一个伤害世界，虽然，经常表达式可能是一个很好的主意，但我只知道很少的正则表达式，请再次检查我的答案（我已经更新了示例）以理解我的意思，如果你能帮助我，我将不胜感激:)
我想指出您确实要求最简单的解决方案。如果您需要更改正则表达式（尤其是如果您对它们不是很好），RegEx 通常会花费大量精力来解码，并且您必须确保不会意外匹配不应该匹配的内容替换（有些人会做一些奇怪的事情，比如将类命名为 .sidebar-left 或在图像文件名中使用 left 或 right 字样）。

【解决方案2】：

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

View on 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);
}

【讨论】：