RE: HTML & CSS example

Works in IE and WebKit. I haven’t done exhaustive tests yet.

From: Glenn Adams [mailto:glenn@skynav.com]
Sent: 30 May 2013 18:13
To: Sean Hayes
Cc: Timed Text Working Group
Subject: Re: HTML & CSS example


On Thu, May 30, 2013 at 11:04 AM, Sean Hayes <Sean.Hayes@microsoft.com<mailto:Sean.Hayes@microsoft.com>> wrote:
I set the display property to table and table cell using CSS.

Ah, clever. I'd missed that. How widespread is support for this usage amongh common UAs?


From: Glenn Adams [mailto:glenn@skynav.com<mailto:glenn@skynav.com>]
Sent: 30 May 2013 17:47
To: Sean Hayes
Cc: Timed Text Working Group
Subject: Re: HTML & CSS example

One quick comment, which is that 'vertical-align' property does not apply to <div/> or other block elements. One has to use either:

(1)

<div>
  <table>
    <tr>
      <td style="vertical-align: bottom">
        <div/>
      </td>
    </tr>
  </table>
</div>

or

(2) use the new CSS3 Box Alignment Module's align-content property [1]:

<div style="align-content: end"/>

[1] http://dev.w3.org/csswg/css-align/#align-content


Note that display-align's {before, center, after} values, correspond to align-content's {start, center, end} values. In particular, start and end are used now in CSS to refer to prior and later edges in a manner independent from the flow axis (block or inline).

I would suggest adopting approach (1) since few UAs support (2) at this time.


On Thu, May 30, 2013 at 9:54 AM, Sean Hayes <Sean.Hayes@microsoft.com<mailto:Sean.Hayes@microsoft.com>> wrote:
Here is the example I was talking about. This is not generated from my converter tool yet, I’ll be fixing that up over the next couple of days.
Let me know if you see any bugs/gotchas

Thanks
Sean.