当前位置：文江博客知识库 en-US 文档 Related IMSC Styling

Styling IMSC documents - Web-related technologies 编辑

IMSC offers many options for styling documents, and most of the IMSC styling properties have direct CSS equivalents, making them familiar to web developers. In this guide you'll learn a bit more about IMSC styling including the difference between inline and referential styling, and efficient styling using inheritance and region styling.

Inline styling

The simplest way of styling content elements like <p> or <span> is by specifying one or more style attributes, such as tts:color, on them. For instance, the following

<p tts:textAlign="center"
   tts:fontSize="64px"
   tts:color="red"
   tts:fontFamily="proportionalSansSerif"
   tts:fontStyle="italic">
 Hello, I am Mork from Ork
</p>

yields:

Referential styling

Inline styling is usually avoided since it generates duplication.

Take for example the following two <span> elements, which have exactly the same style attributes:

<p>
  <span tts:color="yellow" tts:backgroundColor="black">
   Hello, I am Mork from Ork.
  </span>
</p>
<p>
  <span tts:color="yellow" tts:backgroundColor="black">
    I come from another planet.
  </span>
</p>

In referential styling, styles are defined once and reused throughout the document — in a similar way to how CSS rules can be declared once and then applied to multiple HTML elements via for example, element or class selectors. In IMSC this is achieved by defining a <styling> element inside the document <head>, inside which is placed one or more <style> elements — each one of which defines a set of styles that you can reuse elsewhere. This is illustrated below:

<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling"
    xml:lang="en">
  <head>
   <styling>
     <style xml:id="s1" tts:color="yellow" tts:backgroundColor="black"/>
   </styling>
  </head>
  <body>
    <div>
      <p>
        <span style="s1">Hello, I am Mork from Ork.</span>
      </p>
      <p>
        <span style="s1">I come from another planet.</span>
      </p>
    </div>
  </body>
  </tt>

Each <style> element is given an id ("s1" in this example):

<style xml:id="s1" tts:color="yellow" tts:backgroundColor="black"/>

which can then be referred to later in the document:

<span style="s1">Hello, I am Mork from Ork.</span>

this is equivalent to:

<span tts:color="yellow" tts:backgroundColor="black">
  Hello, I am Mork from Ork
</span>

In other words, referencing a <style> element via its id and the style attribute is equivalent to copying the style properties of the <style> element onto the referencing element, as if the style properties had been specified using inline styling.

Style inheritance

If a style property is inheritable, like tts:color, then the style property will apply to all the descendants of an element it is specified on — again, this is similar to CSS and HTML. In the following example, the color "yellow" is applied to the text of both <p> elements because they are descendants of the <body> element.

<body tts:color="yellow">
  <div>
    <p>Hello, I am Mork from Ork.</p>
    <p>I come from another planet.</p>
  </div>
</body>

Specifying a style on an element overrides any style specified on an ancestor, for example in the following snippet, the color of the second <p>'s text would be set to "aqua":

<body tts:color="yellow">
  <div>
     <p>Hello, I am Mork from Ork.</p>
     <p tts:color="aqua">I come from another planet.</p>
  </div>
</body>

Region styling

Region styling plays a special role in IMSC since a style property specified on a region is inherited by all elements that are selected to the region, starting with the <body> element, as if the <region> element was the parent of the <body>element. For example, in the following example, the text "Hello, I am Mork from Ork" will appear in yellow.

<tt
  xmlns="http://www.w3.org/ns/ttml"
  xmlns:tts="http://www.w3.org/ns/ttml#styling"
  xml:lang="en">
  <head>
    <layout>
      <region xml:id="r1" tts:color="yellow" />
    </layout>
 </head>
 <body>
   <div>
     <p region="r1">Hello, I am Mork from Ork</p>
   </div>
 </body>
</tt>

Combining styles

Referential styling can be applied to style elements themselves:

<styling>
  <style xml:id="s1"
         tts:color="yellow"
         tts:backgroundColor="black"/>
  <style xml:id="s2"
         style="s1"
         tts:textAlign="left"/>
</styling>

Multiple styles can be also applied simultaneously on an element. For example, in the snippet below the style properties of both styles s1 and s2 are applied to the same <p> element.

<p style=”s1 s2”>Hello, I am Mork from Ork</p>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

词条统计

浏览：39 次

字数：7215

最后编辑：6 年前

编辑次数：0 次

友情链接

文江博客