Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
palemieux opened this issue Nov 10, 2017 · 5 comments
Closed

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

palemieux opened this issue Nov 10, 2017 · 5 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-text-4 Needs Testcase (WPT) TTML

Comments

@palemieux
Copy link

palemieux commented Nov 10, 2017 •
edited
Loading

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>
@astearns astearns changed the title Allow padding to be applied at line start and end [css-background-4] Allow padding to be applied at line start and end Nov 22, 2017
@fantasai fantasai added css-inline-3 Current Work and removed css-backgrounds-4 labels Jan 3, 2018
@fantasai fantasai changed the title [css-background-4] Allow padding to be applied at line start and end [css-inline] Allow padding to be applied at line start and end Jan 3, 2018
@fantasai fantasai changed the title [css-inline] Allow padding to be applied at line start and end [css-inline][css-text-4] Allow padding to be applied at line start and end Jan 3, 2018
@fantasai
Copy link
Collaborator

fantasai commented Jan 3, 2018

Not sure if this fits better into css-inline or css-text, but it's definitely a layout issue, not a backgrounds one--the backgrounds need more space to draw into.

@nigelmegitt nigelmegitt mentioned this issue Mar 9, 2018
Closed
@fantasai fantasai added the TTML label Apr 4, 2018
@palemieux palemieux mentioned this issue Apr 7, 2018
Closed
@css-meeting-bot
Copy link
Member

The Working Group just discussed line-start/end padding, and agreed to the following resolutions:

  • RESOLVED: Add a line-padding property as described in minutes to text level 4.
The full IRC log of that discussion <fantasai> Topic: line-start/end padding
<fantasai> github: https://github.com//issues/1973
<fantasai> leaverou, they're the first links in each issue
<dael> fantasai: This one is an issue where they want padding at start and end of line and applied to inner most element at that point.
<dael> fantasai: If ou have a span broken across 2 lines and at the end line padding is inserted into the span. With CSS you can wrap all the text but it gives you the last result. THis is effectively the opposite of letter spacing. This is outside the letter on the start and end.
<dael> fantasai: SHould be easy to impl, but we need syntax for it. I wanted to do this because it's easy to understand.
<dael> TabAtkins: Am I imagining a difference in the black line from hello and my?
<dael> fantasai: I think that's not intentional.
<dael> TabAtkins: Okay.
<dael> myles: If you have 2 nested do you use innermost
<dael> TabAtkins: It would be like letter spacing where one wins on the letter that ends the line.
<dael> florian: this inherits?
<dael> fantasai: I think that's simple.
<dael> TabAtkins: Has to. Letter spacing but for the space where we don't put letters.
<dael> myles: Recommendation is at the tie you do the line breaking you do this for the end of the line? Not sure how it works for beginning.
<dael> fantasai: You look at first character on your line and before you figure out how big the character is and like that you have to go forward a bit.
<fantasai> You take the line-padding value of that character
<dael> astearns: They use line padding as the avenue to control this.
<dael> fantasai: We could introduce a line-padding property that has a longhand.
<dael> florian: and if you're intrupted by a float?
<dael> fantasai: It's between you and the float.
<dael> dbaron: Are there interesting things with bidi?
<dael> fantasai: no.
<dael> dbaron: pre or post reordering
<dael> fantasai: post
<dael> myles: there's always a character at the end of the line. Whatever element that's part of is what you consult.
<dael> florian: If you're post-reorder you might get a different character at the end.
<dael> fantasai: Alternative is have this on the block. Whatever block makes the line box gets the value
<dael> Rossen: Similar to the box direction.
<dael> TabAtkins: Then you jsut shoot the line box.
<dael> TabAtkins: Possiblity is make it not inherit.
<TabAtkins> s/shoot/shrink/
<dael> fantasai: YOu want inherit because you mana anon boxes. BUt you can put it on the block container at which point it's applied.
<TabAtkins> s/mana/make/
<dael> florian: I think possibility of different padding based on bidi is not useful and complicates things quite a bit.
<dael> TabAtkins: This does seem better. NO drilling down and no bidi. I like this.
<dael> fantasai: The property is inherited by applies to block containers. When you do your layout you look at line padding property of the line box you're in which comes from the block container.
<dael> fantasai: I guess we're rsolved on that approach of having the property
<dael> astearns: Text level 4 again?
<dael> fantasai: Yeah. Other option is css Inline. Not sure where it fits better.
<dael> astearns: Prop: Add a line-padding property as described in minutes to text level 4.
<dael> RESOLVED: Add a line-padding property as described in minutes to text level 4.

fantasai added a commit that referenced this issue Sep 14, 2018
@fantasai
[css-text-4] Add line-padding property. #1973
7fd0270
@fantasai
Copy link
Collaborator

Edited into the draft at https://drafts.csswg.org/css-text-4/#line-padding-property

Just need to also do #1975 and then should be ready to publish a new WD. ^_^

@nigelmegitt
Copy link

Thanks for that @fantasai - looks really good. I have one small concern that the example description could be misleading and made a proposal in a comment on the commit at 7fd0270#r30504756 but am not sure the best way to make that change. There doesn't seem to be a pull request associated with this issue and I'm still getting to grips with the working style of CSS WG, so apologies for that.

fantasai added a commit that referenced this issue Sep 16, 2018
@fantasai
[css-text-4] Tweak wording as suggested by @nigelmegitt #1973 (comment)
06a6298
@fantasai
Copy link
Collaborator

@nigelmegitt Great! Checked in your suggestion. Thanks so much for the review!!

There doesn't seem to be a pull request associated with this issue and I'm still getting to grips with the working style of CSS WG, so apologies for that.

Usually the editor(s) will push directly to the ED if they're reasonably certain of the change. We'll use PRs if there seems to be a need for review before it goes online, or if proposing edits to someone else's spec.

@fantasai fantasai added the Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. label Sep 16, 2018
@nigelmegitt nigelmegitt mentioned this issue Nov 20, 2018
Closed
This was referenced Nov 27, 2018
Closed
Closed
@nigelmegitt nigelmegitt mentioned this issue Dec 10, 2018
Closed
@nigelmegitt nigelmegitt mentioned this issue Dec 18, 2018
Closed
@nigelmegitt nigelmegitt mentioned this issue Jan 8, 2019
Closed
@palemieux palemieux mentioned this issue Jul 12, 2019
Closed
@fantasai fantasai removed the css-inline-3 Current Work label May 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-text-4 Needs Testcase (WPT) TTML
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@fantasai @astearns @palemieux @nigelmegitt @css-meeting-bot