<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
    xmlns:tts="http://www.w3.org/ns/ttml#styling" 
    xmlns:ebutts="urn:ebu:tt:style"
    xmlns:ebuttm="urn:ebu:tt:metadata"
    xmlns:itts="http://www.w3.org/ns/ttml/profile/imsc1#styling"
    ttp:timeBase="media"
    ttp:cellResolution="32 15"
    xml:lang="en" >
    <head>
        <metadata>
            <ebuttm:documentMetadata>
                <ebuttm:conformsToStandard>urn:ebu:tt:distribution:2018-04</ebuttm:conformsToStandard>
                <ebuttm:conformsToStandard>http://www.w3.org/ns/ttml/profile/imsc1/text</ebuttm:conformsToStandard>
            </ebuttm:documentMetadata>
        </metadata>
        <!-- 
          The styling element defines the styles that will be applied to <p> and <span> elements. 
          EBU-TT uses referenced styles only - inline styles are not supported. 
        -->
        <styling>
            <style xml:id="paragraphStyle"
                tts:fontFamily="ReithSans, Arial, Roboto, proportionalSansSerif, default"
                tts:fontSize="100%" 
                tts:lineHeight="120%"
                tts:textAlign="center"
                tts:wrapOption="noWrap"
                ebutts:multiRowAlign="center"
                ebutts:linePadding="0.5c"
                itts:fillLineGap="true"/>
            <style xml:id="spanStyle"
                tts:color="#FFFFFF"
                tts:backgroundColor="#000000"/>
            <style xml:id="yellowStyle"
                tts:color="#FFFF00"
                tts:backgroundColor="#000000"/>
        </styling>
          <!-- 
            The layout element defines the regions where subtitle text is displayed.
            Here, a top and a bottom regions are defined, with a clearance of 2 lines of
            text from the top and bottom. 
            With a cell resolution of 32 by 15, a font height of 100%c (cell) equals 6.66% 
            (100/15). A line height of 120% of the font size equals 8% of the height of the 
            active video (1.2 x 6.66). Each region accommodates 3 lines of text: 3 x 8% = 24%.
            The width of the regions is set at 70% to take into account 3:4 display and 1c 
            of line padding (2 x 0.5c). 
          -->
        <layout>
            <region xml:id="topRegion"
                tts:origin="15% 16%"
                tts:extent="70% 24%"
                tts:displayAlign="before"
                tts:writingMode="lrtb"
                tts:overflow="visible"/>
            <region xml:id="bottomRegion"
                tts:origin="15% 60%"
                tts:extent="70% 24%"
                tts:displayAlign="after"
                tts:writingMode="lrtb"
                tts:overflow="visible"/>
        </layout>
    </head>
    <body>
        <!-- 
          The intended use of DIVs is to hold semantic information, for example sections
          within a programme. DIVs are not intended to be used for presentation, although 
          style applied to them would cascade to descendent elements. 
        -->
        <div>
            <!-- 
              A paragraph holds a single subtitle of one or more lines, with a 
              time range and region allocation. 
            -->
            <p xml:id="subtitle1" region="bottomRegion" style="paragraphStyle"
                begin="00:00:10.000" end="00:00:20.000"><!-- 
                  A span is used to apply style to the text, by reference. 
             --><span style="spanStyle">Beware the Jubjub bird, and shun</span><br/><span style="spanStyle">The frumious Bandersnatch!</span></p>
            <p xml:id="subtitle2" region="topRegion" style="paragraphStyle"
                begin="00:00:30.000" end="00:00:31.000"
                ><span style="spanStyle">This subtitle is in the top region.</span><br
                /><span style="spanStyle">it contains one word in </span><span style="yellowStyle">yellow </span><span style="spanStyle">colour.</span></p>
        </div>
    </body>
</tt>
