Layout in IMSC: top-bottom

<?xml version="1.0" encoding="UTF-8"?>
     <tt xml:lang="en" 
         xmlns="http://www.w3.org/ns/ttml" 
         xmlns:tts="http://www.w3.org/ns/ttml#styling">
        <head>
          <layout>
            <region xml:id="top"
                    tts:origin="10% 10%"
                    tts:extent="80% 80%"
                    tts:backgroundColor="transparent"
                    tts:showBackground="whenActive" 
                    tts:textAlign="center"
                    tts:displayAlign="before"/>
            <region xml:id="bottom"
                    tts:origin="10% 10%"
                    tts:extent="80% 80%"
                    tts:backgroundColor="transparent"
                    tts:showBackground="whenActive"
                    tts:textAlign="center"
                    tts:displayAlign="after"/>
          </layout>
       </head>
       <body>
         <div>
           <p region="top" begin="1s" end="2s">
             Hello, I am Mork from Ork
           </p>
           <p region="bottom" begin="3s" end="4s">
             Who are you?
           </p>
         </div>
       </body>
     </tt>

Go to second: