9

バックグラウンド

右から左へのロケールと左から右へのロケールを有効にしたいのですが、スタイルシートのセットを1つだけ維持したいと思います。

アイデアは、呼び出しが（r2を使用して）application-rtl.cssのrtl変換バージョンを提供するということです。application.css

この機能には2つのユースケースがあります。

  • 開発：動的に提供し、オンザフライで変換
  • 本番環境：プリコンパイルで-rtlバージョンを生成します（rakeアセットの拡張：プリコンパイルタスク）

これまでのところ、RTLに変換されたすべてのスタイルシートをまったく触れずに提供できるRTLConverterを実装することができました。

config / initializers / 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

これをスプロケットのエンジンとして実装して、拡張子が.rtlのファイルのみを変換することもできます。

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

私の質問

次の目的でアセットパイプラインに接続するにはどうすればよいですか。

  1. 名前が接尾辞'-rtl'のスタイルシートのオンザフライ変換バージョンを提供しますか（接尾辞のないファイルを探して、その変換バージョンを提供します）？
  2. プリコンパイル中にすべてのスタイルシートのname-postfix'-rtl'を使用して変換されたコピーを作成する

ノート：

コンバーターはsassエンジンと連携して動作しませんが、より少ない数で正常に動作するようです。これは、twitter-bootstrapベースのサイトに適用されており、魅力のように機能します。

コンバーターは実稼働環境でテストされていません。

この問題に対する適切な解決策を見つけることができれば、私は宝石を作成して維持し、それをコミュニティに還元するつもりです。

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を含め、名前に「-flipped」が追加されたバージョンのスタイルシートを提供することで、開発と本番の両方で自動的にフリップされたバージョンを提供できるようになりました。

rubygems.orgで宝石を見つけてください：stylesheet_flipper

gihubで使用法の説明を見つけてください：monibuds / stylesheet_flipper

于 2012-08-06T18:21:16.830 に答える
0

私の知る限り、Sprocketsは、プロセッサへのパスルックアップメカニズムへのフックを公開していません。たとえそうだったとしても、一般化された「アセットの読み取り」メソッドを呼び出すことはできないと思います。

全体として、APにあなたが望むことをさせるには、深刻な腕のねじれが必要になるのではないかと心配しています。

つまり、これはまったく異なるアイデアです。もしあなたが：

  • 開発中であっても、オンザフライのアセット処理を完全に削除しました
  • ガードタスクを設定しました
    • ソースが変更されたときにアセットを再コンパイルします（これはすでに存在すると思います）
    • コンパイルされたCSSのRTLバージョンを生成します
  • コンパイルされたアセットを本番環境にプッシュします（あえぎ！）

言い換えれば、AP機能の一部を交換して柔軟性を高めることができるでしょうか。

（これは単なるアイデアであり、解決策ではないため、ここでは賞金を獲得するつもりはありません）

于 2012-07-08T06:49:06.303 に答える
0

1年前にこの問題について書いた：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 に答える