ポータルの右から左に記述する言語の 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: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*/"};
}