You can define “styles” for UI XML using a Style
object, using css-like selectors.
<Style>
<![CDATA[
/* Style for all text frames */
Text {
color: #ff0000;
font-size: 64px;
-dcei-text-shadow: false;
-dcei-text-outline: false;
}
.small {
color: #00ff00;
font-size: 32px;
}
.large {
color: #0000ff20;
font-size: 128px;
}
]]>
</Style>
Given the above style definition, the follow UI definition will display 3 text frames with varying color/size all without shadow/outline:
<VStack>
<Text text="test" />
<Text class="large" text="test" />
<Text class="small" text="test" />
</VStack>
color: #FF0000;
font-size: 16px;
white-space: normal | nowrap;
overflow: visible | hidden;
-dcei-font-size-min: 16px;
-dcei-font-size-max: 32px;
-dcei-text-rtl-support: false;
-dcei-text-alignment: start | end | ...;
-dcei-text-shadow: true;
-dcei-text-shadow-width: 1;
-dcei-text-shadow-softness: 2;
-dcei-text-shadow-color: #FF0000;
-dcei-text-shadow-direction: 1 2;
-dcei-text-outline: true;
-dcei-text-outline-color: #ff0000;
-dcei-text-outline-width: 2;
-dcei-text-outline-softness: 1;