Skip to content

Commit

Permalink
[giow] (0) Captions - Stage 21.5: rendering: default positioning, mak…
Browse files Browse the repository at this point in the history 
…e the background not fill the containing block, just the text

git-svn-id: http://svn.whatwg.org/webapps@5152 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jul 13, 2010
1 parent ec8a36a commit e988648
Show file tree
Hide file tree
Showing 3 changed files with 383 additions and 92 deletions.
155 changes: 124 additions & 31 deletions complete.html
View file
Expand Up @@ -86543,35 +86543,122 @@ <h5 id=websrt-cue-text-rendering-rules><span class=secno>14.3.2.1 </span><dfn>We
<var title="">height</var> be '<var title="">size</var>vh'. (These are CSS values used by the next
section to set CSS properties for the rendering.)</li>

<li><p></p>

<pre class=XXX>
calculate 'top' and 'left':
* If D=horizontal:
Let H = the height of the first line box of /lines/
If A=start and 'direction' is 'ltr':
If A=end and 'direction' is 'rtl':
Let X = min(T * VW, VW - width of /container/)
If A=end and 'direction' is 'ltr':
If A=start and 'direction' is 'rtl':
Let X = min(T * VW - width of /container/, 0)
If A=middle and T &lt;= 50%:
Let X = max(T * VW - (width of /container/)/2, 0)
If A=middle and T &gt; 50%:
Let X = min(T * VW + (width of /container/)/2, VW) - (width of /container/)
If D=vertical:
Let H = the width of the first line box of /lines/
If A=start:
Let Y = min(T * VH, VH - height of /container/)
If A=end:
Let Y = min(T * VH - height of /container/, 0)
If A=middle and T &lt;= 50%:
Let Y = max(T * VH - (height of /container/)/2, 0)
If A=middle and T &gt; 50%:
Let Y = min(T * VH + (height of /container/)/2, VH) - (height of /container/)
</pre>
<li>

</li>
<p>Determine the value of <var title="">x-position</var> or <var title="">y-position</var> for <var title="">cue</var> as per the
appropriate rules from the following list:</p>

<dl class=switch><dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-start-alignment title="timed track cue start alignment">start</a>,
and <var title="">direction</var> is 'ltr'</dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-end-alignment title="timed track cue end alignment">end</a>,
and <var title="">direction</var> is 'rtl'</dt>

<dd>
<p>Let <var title="">x-position</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a>.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-end-alignment title="timed track cue end alignment">end</a>,
and <var title="">direction</var> is 'ltr'</dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-start-alignment title="timed track cue start alignment">start</a>,
and <var title="">direction</var> is 'rtl'</dt>

<dd>
<p>Let <var title="">x-position</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a> subtracted from 100.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical growing left writing direction">vertical growing left</a>,
and the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-start-alignment title="timed track cue start alignment">start</a></dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical growing right writing direction">vertical growing right</a>,
and the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-start-alignment title="timed track cue start alignment">start</a></dt>

<dd>
<p>Let <var title="">y-position</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a>.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical growing left writing direction">vertical growing left</a>,
and the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-end-alignment title="timed track cue end alignment">end</a></dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical growing right writing direction">vertical growing right</a>,
and the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-end-alignment title="timed track cue end alignment">end</a></dt>

<dd>
<p>Let <var title="">y-position</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a> subtracted from 100.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-middle-alignment title="timed track cue middle alignment">middle</a>,
and <var title="">direction</var> is 'ltr'</dt>

<dd>
<p>Let <var title="">x-position</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a> minus half of <var title="">size</var>.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-middle-alignment title="timed track cue middle alignment">middle</a>,
and <var title="">direction</var> is 'rtl'</dt>

<dd>
<p>Let <var title="">x-position-reverse</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a> minus half of <var title="">size</var>.</p>
<p>Let <var title="">x-position</var> be <var title="">x-position-reverse</var> subtracted from 100.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical growing left writing direction">vertical growing left</a>,
and the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-middle-alignment title="timed track cue middle alignment">middle</a></dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical growing right writing direction">vertical growing right</a>,
and the <a href=#timed-track-cue-alignment>timed track cue alignment</a> is <a href=#timed-track-cue-middle-alignment title="timed track cue middle alignment">middle</a></dt>

<dd>
<p>Let <var title="">y-position</var> be the <a href=#timed-track-cue-text-position>timed track cue text position</a> minus half of <var title="">size</var>.</p>
</dd>

</dl></li>

<li>

<p>Determine the value of whichever of <var title="">x-position</var> or <var title="">y-position</var> is
not yet calculated for <var title="">cue</var> as per the
appropriate rules from the following list:</p>

<dl class=switch><dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
and the <a href=#timed-track-cue-snap-to-lines-flag>timed track cue snap-to-lines flag</a> is set</dt>

<dd>
<p>Let <var title="">y-position</var> be zero.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-horizontal-writing-direction title="timed track cue horizontal writing direction">horizontal</a>,
and the <a href=#timed-track-cue-snap-to-lines-flag>timed track cue snap-to-lines flag</a> is not set</dt>

<dd>
<p>Let <var title="">y-position</var> be the <a href=#timed-track-cue-line-position>timed track cue line position</a>.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical growing left writing direction">vertical growing left</a>,
and the <a href=#timed-track-cue-snap-to-lines-flag>timed track cue snap-to-lines flag</a> is set</dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical growing right writing direction">vertical growing right</a>,
and the <a href=#timed-track-cue-snap-to-lines-flag>timed track cue snap-to-lines flag</a> is set</dt>

<dd>
<p>Let <var title="">x-position</var> be zero.</p>
</dd>

<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-left-writing-direction title="timed track cue vertical growing left writing direction">vertical growing left</a>,
and the <a href=#timed-track-cue-snap-to-lines-flag>timed track cue snap-to-lines flag</a> is not set</dt>
<dt>If the <a href=#timed-track-cue-writing-direction>timed track cue writing direction</a> is <a href=#timed-track-cue-vertical-growing-right-writing-direction title="timed track cue vertical growing right writing direction">vertical growing right</a>,
and the <a href=#timed-track-cue-snap-to-lines-flag>timed track cue snap-to-lines flag</a> is not set</dt>

<dd>
<p>Let <var title="">x-position</var> be the <a href=#timed-track-cue-line-position>timed track cue line position</a>.</p>
</dd>

</dl></li>

<li><p>Let <var title="">left</var> be '<var title="">x-position</var>vw' and <var title="">top</var> be '<var title="">y-position</var>vh'. (These again are CSS values used by
the next section to set CSS properties for the
rendering.)</li>

<li>

Expand All @@ -86594,6 +86681,11 @@ <h5 id=websrt-cue-text-rendering-rules><span class=secno>14.3.2.1 </span><dfn>We

<li>No style sheets are associated with <var title="">nodes</var>.</li>

<li>The children of the <var title="">nodes</var> must be
wrapped in an anonymous box whose 'display' property has the
value 'inline'. This is the <dfn id=websrt-cue-background-box>WebSRT cue background
box</dfn>.</li>

<li>Runs of children of <a href=#websrt-ruby-object title="WebSRT Ruby Object">WebSRT
Ruby Objects</a> that are not <a href=#websrt-ruby-text-object title="WebSRT Ruby Text
Object">WebSRT Ruby Text Objects</a> must be wrapped in
Expand All @@ -86603,7 +86695,8 @@ <h5 id=websrt-cue-text-rendering-rules><span class=secno>14.3.2.1 </span><dfn>We
<li>All properties on <a href=#websrt-node-object title="WebSRT Node Object">WebSRT
Node Objects</a> have their initial values, except as
explicitly overridden for specific nodes in the next
section.</li>
section. (That section uses some of the variables whose values
were calculated earlier in this algorithm.)</li>

<li>Text runs must be wrapped at the edge of their containing
blocks, regardless of the value of the 'white-space' property,
Expand Down Expand Up @@ -86687,8 +86780,8 @@ <h5 id=websrt-cue-text-rendering-rules><span class=secno>14.3.2.1 </span><dfn>We
<p>The 'color' property on the (root) <a href=#list-of-websrt-node-objects>List of WebSRT Node
Objects</a> must be set to 'rgba(255,255,255,0)'. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>

<p>The 'background' shorthand property on the (root) <a href=#list-of-websrt-node-objects>List of
WebSRT Node Objects</a> must be set to 'rgba(0,0,0,0.8)'. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
<p>The 'background' shorthand property on the <a href=#websrt-cue-background-box>WebSRT cue
background box</a> must be set to 'rgba(0,0,0,0.8)'. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>

<p>A text outline or stroke may also be set on the (root) <a href=#list-of-websrt-node-objects>List
of WebSRT Node Objects</a>, if supported.</p> <!-- 'text-outline'
Expand Down

0 comments on commit e988648

Please sign in to comment.