ポータルでの右から左に記述する言語の CSS

さまざまな方法で、右から左に記述する言語の CSS の生成を制御できます。

サービスポータル (/sp) およびカスタムポータル以外のベースシステムポータルでは、右から左に記述する言語のポータルの方向を完全に反映するために、追加の CSS カスタマイズが必要になる場合があります。

カスタムウィジェットでは、右から左に記述する言語に手動で変換する必要がある場合があります。

• ウィジェットの HTML テンプレートのインラインスタイルの場合は、これらのスタイルをウィジェットの CSS に移動して、自動的に変換されるようにします。
• ウィジェットの HTML テンプレートの内部スタイルの場合、[ dir="rtl"] 属性セレクターまたは .rtl クラスセレクターを使用して、右から左に記述する言語に固有の CSS を提供できます。
• 右から左に記述する言語に固有の CSS を含めるには、ウィジェットのサーバースクリプトの クラスで isRTLEnabled() メソッドを呼び出すか、ウィジェットのクライアントスクリプトで g_portal_isrtl グローバルフラグを使用します。

また、テーマ、ページ、ウィジェット、またはウィジェットインスタンス CSS では、Sass 補間文字列 (#{""}) のみを使用して、CSS プロパティに右から左へのディレクティブを追加できます。

表 : 1. 右から左に記述する言語の CSS ディレクティブ

右から左に記述する CSS ディレクティブ	説明
/*rtl:ignore*/	ポータル CSS を右から左に記述する言語に変換するときに、このプロパティを無視します。
/*rtl:prepend:10px*/	右から左に記述する言語のプロパティ値の先頭に値を追加します。この例では 、10px が付加されます。
/*rtl:append:3rem*/	右から左に記述する言語のプロパティ値の末尾に値を追加します。この例では 、3rem を追加します。
/*rtl:replace:30px*/ または /*rtl:30px*/	プロパティ値を右から左に記述する言語の指定された値に置き換えます。この例では、プロパティ値を 30px に置き換えます。
/*rtl:insert:25px*/	右から左に記述する言語のディレクティブの代わりに、指定された値を挿入します。この例では 、25px を挿入します。

変換された右から左への CSS の変換プロパティを無視する

.fl {
transform: rotate(45deg) translateY(5px) #{"/*rtl:ignore*/"};
}