webサイトを英文翻訳した際に適用するcssについて

Question

Googleの翻訳機能をサイトに使用しているのですが、英文翻訳にするとレイアウトが崩れてしまいます。
cssを変更したら治るのは分かったのですが、英文用にcssを適用してしまうと日本語の時のレイアウトが崩れてしまいます。
翻訳し、英文の時のみ適用するcssなどの方法はあるのでしょうか？
よろしくお願いいたします。

Answer 1

Googleの埋め込みでの翻訳機能の場合はどうなるかわからないですが…

Chromeの翻訳機能を使用するとhtmlタグに「translated-ltr」のclassが付与されるようです。
同じ挙動となる場合は

.translated-ltr p {
}

といった形でスタイルを変えていくとよいと思います。

上記の方法でできない場合はご自身のサイトの翻訳機能を実行してみて
動的にclassが付与されていないかチェックしてみてください。
開発者ツールで確認できるかと思います。

Comments

[退会済みユーザー]

解答ありがとうございます。
教えてもらった方法で英文でのレイアウトは大丈夫なのですが、今度は英文から日本語に戻すとき、日本語から英語以外の言語に変換する時に英文と同じcssが適用されてしまいます。
google翻訳機能でどの言語に翻訳しても、htmlにclass名「translated-ltr」を追加しているのは確認できましたが、英語翻訳だから、中国語翻訳だから追加されているというclass名は見つからない状態です。
やはり翻訳したいページごとに、別ページに飛ばすなどの方法が一番手っ取り早いのでしょうか？

[ShoheiTai]

Chromeの機能で翻訳した場合と同じ挙動だと仮定すると
言語ごとにCSSを切り替えるのは難しいですね。。
翻訳のボタンを押した後になんらかのタイミングで、言語を判定してclass付与するjsを走らせるといった方法もあるかと思いますが、実装は大変そうです。。

実装として少し手間になるかとは思いますが、やはり言語別にページを作っておくのが一番良いかもしれません。特に公開されているサイトであれば、SEO的なメリットも得られるので！

[退会済みユーザー]

いろいろとありがとうございます。
すみませんが、これは興味からなのですが仮にjsで走らせたいと考えたとき、参考になるサイトまたはコードなどご存知でしょうか？
もしご存知でしたら教えていただきたいです。

[ShoheiTai]

以下ページが参考になりそうです！

Javascriptで自然言語文字列が何語か調べるライブラリ
http://qiita.com/aoisensi/items/020119403edc2abb620e

[退会済みユーザー]

ありがとうございます。
なんとかjsで変更することができそうです。

Answer 2

動作しなかったので見直し中