Skip to content

[css-inline][css-text-4] Allow padding to be applied at line start and end #1973

@palemieux

Description

@palemieux

Per the 20171109 joint TTWG/CSS meeting

As illustrated at linePadding.pdf and specified at https://tech.ebu.ch/docs/tech/tech3380.pdf, a common captioning style requires the background of a line area to be extended at line start and line end. This styling capability is not currently supported by CSS.

See for example regions 3 and 4 at https://codepen.io/palemieux/pen/vyzbqW . Region 1 and 2 illustrate a region with and without line padding applied.

This capability mirrors the ebutts:linePadding styling attribute at https://www.w3.org/TR/ttml-imsc1.0.1/#linepadding , which is demonstrated in the following sample document, which can be rendered at http://sandflow.com/imsc1proc/index.html .

<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 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:ttm="http://www.w3.org/ns/ttml#metadata"
 xmlns:ebutts="urn:ebu:tt:style" xml:lang="en" ttp:timeBase="media" xmlns:ebuttm="urn:ebu:tt:metadata" >
    <head>
        <metadata>
            <ebuttm:documentMetadata>
                <ebuttm:conformsToStandard>urn:ebu:tt:distribution:2014-01</ebuttm:conformsToStandard>
                <ebuttm:conformsToStandard>http://www.w3.org/ns/ttml/profile/imsc1/text</ebuttm:conformsToStandard>
            </ebuttm:documentMetadata>
        </metadata>
        <styling>
            <style xml:id="baseStyle" tts:color="#FFFFFF" tts:textAlign="center" tts:lineHeight="100%"/>
            <style xml:id="blackBackground" tts:backgroundColor="#000000"/>
            <style xml:id="greenBackground" tts:backgroundColor="#00FF00"/>
            <style xml:id="withLinePadding" ebutts:linePadding="0.5c"/>
        </styling>
        <layout>
            <region xml:id="area1" tts:origin="5% 10%" tts:extent="90% 20%" tts:displayAlign="center"/>
            <region xml:id="area2" tts:origin="5% 70%" tts:extent="90% 20%" tts:displayAlign="center"/>
        </layout>
    </head>
    <body>
        <div style="baseStyle">			
            <p xml:id="s1" region="area1" begin="00:00:01" end="00:00:09">
                <span style="greenBackground">Centered text on two lines<br/>without padding.</span>
            </p>
            <p xml:id="s2" region="area2" style="withLinePadding" begin="00:00:01" end="00:00:09">
                <span style="blackBackground">Centered text on two lines<br/>with padding.</span>
            </p>
        </div>
    </body>
</tt>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions