ポータルの右から左に記述する言語の CSS
右から左に記述する言語の CSS の生成は、さまざまな方法で制御できます。
(/sp) およびカスタムポータル以外の サービスポータル ベースシステムポータルでは、右から左に記述する言語のポータルの方向を完全に反映するために、追加の CSS カスタマイズが必要になる場合があります。
カスタムウィジェットは、右から左に記述する言語の場合、手動変換が必要になる場合があります。
- ウィジェットの HTML テンプレートのインライン スタイルの場合は、これらのスタイルをウィジェットの CSS に移動すると、自動的に変換されます。
- ウィジェットの HTML テンプレートの内部スタイルには、[
dir="rtl"]属性セレクターまたは.rtlクラス セレクターを使用して、右から左に記述する言語に固有の CSS を提供できます。 - 右から左に記述する言語に固有の CSS を含めるには、ウィジェットのサーバースクリプトのGlideSPScriptable - Scopedクラスで isRTLEnabled() メソッドを呼び出すか、ウィジェットのクライアントスクリプトで g_portal_isrtl グローバルフラグを使用します。
また、テーマ、ページ、ウィジェット、またはウィジェットインスタンス CSS では、Sass 補間文字列 (#{""}) を使用してのみ、右から左に記述するディレクティブを CSS プロパティに追加できます。
| 右から左に記述する CSS ディレクティブ | 説明 |
|---|---|
/*rtl:ignore*/ |
ポータル CSS を右から左に記述する言語の変換時に、このプロパティを無視します。 |
/*rtl:prepend:10px*/ |
右から左に記述する言語のプロパティ値の先頭に値を追加します。この例では、先頭に 10px が付加されます。 |
/*rtl:append:3rem*/ |
右から左に記述する言語のプロパティ値の末尾に値を追加します。この例では、 3rem が付加されます。 |
/*rtl:replace: または /*rtl: |
プロパティ値を、右から左に記述する言語の指定された値に置き換えます。この例では、プロパティ値を 30px に置き換えます。 |
/*rtl:insert:25px*/ |
右から左に記述する言語のディレクティブの代わりに指定された値を挿入します。この例では 25px を挿入します。 |
変換された右から左に記述する CSS の transform プロパティを無視します
.fl {
transform: rotate(45deg) translateY(5px) #{"/*rtl:ignore*/"};
}