9

背景

我想启用从右到左的语言环境以及从左到右，但我只想维护一组样式表。

这个想法是调用application-rtl.css将提供application.css（使用 r2）的 rtl 转换版本。

此功能有两个用例：

  • 开发：动态服务，即时转换
  • 生产：让预编译生成-rtl版本（扩展 rake 资产：预编译任务）

到目前为止，我已经成功地实现了一个 RTLConverter，它使我能够提供所有转换为 RTL 的样式表，而无需触及它们：

配置/初始化程序/rtl_converter.rb：

require "r2"
require "tilt"

class RTLConverter < Tilt::Template
  def prepare; end

  def evaluate(context, locals, &block)
    R2.r2 @data
  end
end

Rails.application.assets.register_preprocessor 'text/css', RTLConverter

您还可以将其实现为 sprockets 的引擎，以仅转换具有.rtl扩展名的文件：

Rails.application.assets.register_engine 'rtl', RTLConverter

我的问题

我如何才能连接到资产管道以便：

  1. 使用名称后缀“-rtl”提供任何样式表的即时转换版本（查找没有后缀的文件并提供其转换版本）？
  2. 在预编译期间使用所有样式表的名称后缀“-rtl”创建转换后的副本

笔记：

该转换器不能与 sass 引擎一起使用，但似乎可以正常工作。它已被应用到一个基于 twitter-bootstrap 的网站上，并且就像一个魅力。

该转换器尚未在生产中进行测试。

如果我能找到一个体面的解决方案来解决这个问题，我打算创建和维护一个 gem 并将其回馈给社区。

4

4 回答 4

5

我的目标是直接使用 CSS 来处理 LTR-RTL 差异。CSS 可能可以为您处理这项工作。如果您将 CSS 定义为 LTR，那么基于 CSS 类，您可以覆盖您想要的内容。

  1. 默认情况下，将整个 CSS 样式表定义为 LTR。
  2. 在处理语言环境的主体上放置一个额外的 css 类。例如<body class="RTL">
  3. 通过覆盖以“ RTL”为前缀的 CSS 类来定义默认的所有例外

一个简短的例子。原始“默认”样式：

body { direction: ltr; }
.sidebar { width: 200px; float: right; margin-left: 30px }

然后，稍后在您的 css 中覆盖相关样式：

body.rtl { direction: rtl; }
.rtl .sidebar { float: right; margin-right: 30px; }

/*remember to 'reset' all defaults for example: */
.rtl .sidebar { margin-left: 0; }

使用 sass，您有一个共同的地方来定义标准变量，例如上面示例中的边距。你的旅费可能会改变。但对我来说，这听起来比搞乱资产管道更简单。

于 2012-07-05T19:09:44.637 回答
4

不幸的是，其他答案都没有真正提出我正在寻找的解决方案，所以在深入研究之后，我能够想出一个简单的 gem，它可以根据文件名翻转样式表。

因此，通过包含该 gem 并提供名称后附加“-flipped”的样式表版本，我现在能够在开发和生产中提供自动翻转的版本。

在 ruby​​gems.org 上找到 gem：stylesheet_flipper

在 gihub 上查找使用说明：monibuds/stylesheet_flipper

于 2012-08-06T18:21:16.830 回答
0

据我所知，Sprockets 不会将任何挂钩暴露给处理器的路径查找机制。即使确实如此，我认为您也不能调用一些通用的“读取资产”方法。

总而言之，我担心让 AP 做你想做的事需要一些严重的扭曲。

所以这是一个完全不同的想法。如果你：

  • 完全放弃动态资产处理，即使在开发中
  • 有一个 Guard 任务设置为
    • 当资源发生变化时重新编译资产（我认为这已经存在）
    • 生成已编译 CSS 的 RTL 版本
  • 将编译好的资产推送到生产环境（喘气！）

换句话说，也许您可​​以交换一些 AP 功能来提高灵活性？

（我不会在这里寻求赏金，因为这只是一个想法，而不是解决方案）

于 2012-07-08T06:49:06.303 回答
0

一年前写过这个问题：http:
//amitkazmirsky.com/2011/05/29/dry-your-rtl-and-ltr-css-files-in-rails-with-sass/

基本上我的方法是用方向作为变量编写css：

#user-box {
    backgroud-color: white;
    padding: 0 5px;
    float: $dir;
}

#side-nav {
    margin-#{$opdir}: 5px;
}
于 2012-07-15T17:01:24.437 回答