The skin service handles stylesheet rewriting to accommodate the orientation. It works by appending -lt or -rt to the stylesheet name.
For instance: /web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet-rt.css will return the same stylesheet as /web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet.css but processed for the RT orientation. The -lt suffix is optional.
Stylesheet authors can annotate their stylesheet to create content that depends on the orientation.
Example 2.2.
In the example, we need to use the orientation to modify the float attribute that will make the horizontal tabs either float on left or on right:
float: left; /* orientation=lt */
float: right; /* orientation=rt */
font-weight: bold;
text-align: center;
white-space: nowrap;
The LT produced output will be:
float: left; /* orientation=lt */
font-weight: bold;
text-align: center;
white-space: nowrap;
The RT produced output will be:
float: right; /* orientation=rt */
font-weight: bold;
text-align: center;
white-space: nowrap;
Example 2.3.
In this example, you need to modify the padding according to the orientation:
color: white;
line-height: 24px;
padding: 0px 5px 0px 0px; /* orientation=lt */
padding: 0px 0px 0px 5px; /* >orientation=rt */
The LT produced output will be:
color: white;
line-height: 24px;
padding: 0px 5px 0px 0px; /* orientation=lt */
The RT produced output will be:
color: white;
line-height: 24px;
padding: 0px 0px 0px 5px; /* orientation=rt */