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