0

我有许多为从左到右的网站制作的 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 中做到这一点（以最简单的方式）？

4

2 回答 2

0

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

在 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);
}
于 2013-09-07T18:26:56.277 回答
0

如果您尝试依靠正则表达式/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 预处理器来为您完成这种繁重的工作，因为这是他们最擅长的。

于 2012-09-13T17:07:13.460 回答