Skip to content

Fix incorrect WebVTT size mapping for horizontal TTML text #143

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

Open
quocngo-dek wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix incorrect WebVTT size mapping for horizontal TTML text #143

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
21932b5
Fix incorrect WebVTT size mapping for horizontal TTML text
May 8, 2026
40e72e8
Fix WebVTT REGION block format to match W3C specification
May 11, 2026
1e234e7
Fix TTML to WebVTT region mapping for bottom-aligned text
May 11, 2026
8f3c22b
Update tests to match corrected WebVTT behavior
May 11, 2026
39515b9
Add parser support for new REGION block format and test
May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions subtitles.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,19 +504,39 @@ func (sa *StyleAttributes) propagateTTMLAttributes() {
}
//cue settings
//default TTML WritingMode is lrtb i.e. left to right, top to bottom
sa.WebVTTSize = dimensions[1]
sa.WebVTTSize = dimensions[0]
if sa.TTMLWritingMode != nil && strings.HasPrefix(*sa.TTMLWritingMode, "tb") {
sa.WebVTTSize = dimensions[0]
sa.WebVTTSize = dimensions[1]
}
}
}
if sa.TTMLOrigin != nil {
//region settings
sa.WebVTTRegionAnchor = "0%,0%"
sa.WebVTTViewportAnchor = strings.ReplaceAll(strings.TrimSpace(*sa.TTMLOrigin), " ", ",")
sa.WebVTTScroll = "up"
//cue settings
// Anchor at bottom-left (0%,100%) for bottom-aligned text
sa.WebVTTRegionAnchor = "0%,100%"

// Calculate viewport anchor at bottom edge for displayAlign="after"
coordinates := strings.Split(*sa.TTMLOrigin, " ")
if len(coordinates) > 1 && sa.TTMLExtent != nil {
dimensions := strings.Split(*sa.TTMLExtent, " ")
if len(dimensions) > 1 {
// Calculate bottom edge: origin Y + extent height
originY := strings.TrimSpace(coordinates[1])
extentHeight := strings.TrimSpace(dimensions[1])

originYVal, _ := strconv.ParseFloat(strings.ReplaceAll(originY, "%", ""), 64)
extentHeightVal, _ := strconv.ParseFloat(strings.ReplaceAll(extentHeight, "%", ""), 64)
bottomY := originYVal + extentHeightVal

sa.WebVTTViewportAnchor = fmt.Sprintf("%s,%.0f%%", strings.TrimSpace(coordinates[0]), bottomY)
} else {
sa.WebVTTViewportAnchor = strings.ReplaceAll(strings.TrimSpace(*sa.TTMLOrigin), " ", ",")
}
} else {
sa.WebVTTViewportAnchor = strings.ReplaceAll(strings.TrimSpace(*sa.TTMLOrigin), " ", ",")
}

//cue settings
if len(coordinates) > 1 {
sa.WebVTTLine = coordinates[0]
sa.WebVTTPosition = newWebVTTPosition(coordinates[1])
Expand Down
17 changes: 15 additions & 2 deletions testdata/example-out.vtt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,21 @@ color: red;
background-image: linear-gradient(to bottom, dimgray, lightgray);
}

Region: id=bill lines=3 regionanchor=100%,100% scroll=up viewportanchor=90%,90% width=40%
Region: id=fred lines=3 regionanchor=0%,100% scroll=up viewportanchor=10%,90% width=40%
REGION
id:bill
width:40%
lines:3
viewportanchor:90%,90%
regionanchor:100%,100%
scroll:up

REGION
id:fred
width:40%
lines:3
viewportanchor:10%,90%
regionanchor:0%,100%
scroll:up

NOTE this a nice example
of a VTT
Expand Down
6 changes: 3 additions & 3 deletions ttml_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ func TestTTML(t *testing.T) {
assert.Equal(t, &astisub.Metadata{Framerate: 25, Language: astisub.LanguageFrench, Title: "Title test", TTMLCopyright: "Copyright test"}, s.Metadata)
// Styles
assert.Equal(t, 3, len(s.Styles))
assert.Equal(t, astisub.Style{ID: "style_0", InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorWhite, TTMLColor: astisub.ColorWhite, TTMLExtent: astikit.StrPtr("100% 10%"), TTMLFontFamily: astikit.StrPtr("sansSerif"), TTMLFontStyle: astikit.StrPtr("normal"), TTMLOrigin: astikit.StrPtr("0% 90%"), TTMLTextAlign: astikit.StrPtr("center"), WebVTTAlign: "center", WebVTTLine: "0%", WebVTTLines: 2, WebVTTPosition: &astisub.WebVTTPosition{XPosition: "90%"}, WebVTTRegionAnchor: "0%,0%", WebVTTScroll: "up", WebVTTSize: "10%", WebVTTViewportAnchor: "0%,90%", WebVTTWidth: "100%"}, Style: s.Styles["style_2"]}, *s.Styles["style_0"])
assert.Equal(t, astisub.Style{ID: "style_1", InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorWhite, TTMLColor: astisub.ColorWhite, TTMLExtent: astikit.StrPtr("100% 13%"), TTMLFontFamily: astikit.StrPtr("sansSerif"), TTMLFontStyle: astikit.StrPtr("normal"), TTMLOrigin: astikit.StrPtr("0% 87%"), TTMLTextAlign: astikit.StrPtr("center"), WebVTTAlign: "center", WebVTTLine: "0%", WebVTTLines: 2, WebVTTPosition: &astisub.WebVTTPosition{XPosition: "87%"}, WebVTTRegionAnchor: "0%,0%", WebVTTScroll: "up", WebVTTSize: "13%", WebVTTViewportAnchor: "0%,87%", WebVTTWidth: "100%"}}, *s.Styles["style_1"])
assert.Equal(t, astisub.Style{ID: "style_2", InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorWhite, TTMLColor: astisub.ColorWhite, TTMLExtent: astikit.StrPtr("100% 20%"), TTMLFontFamily: astikit.StrPtr("sansSerif"), TTMLFontStyle: astikit.StrPtr("normal"), TTMLOrigin: astikit.StrPtr("0% 80%"), TTMLTextAlign: astikit.StrPtr("center"), WebVTTAlign: "center", WebVTTLine: "0%", WebVTTLines: 4, WebVTTPosition: &astisub.WebVTTPosition{XPosition: "80%"}, WebVTTRegionAnchor: "0%,0%", WebVTTScroll: "up", WebVTTSize: "20%", WebVTTViewportAnchor: "0%,80%", WebVTTWidth: "100%"}}, *s.Styles["style_2"])
assert.Equal(t, astisub.Style{ID: "style_0", InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorWhite, TTMLColor: astisub.ColorWhite, TTMLExtent: astikit.StrPtr("100% 10%"), TTMLFontFamily: astikit.StrPtr("sansSerif"), TTMLFontStyle: astikit.StrPtr("normal"), TTMLOrigin: astikit.StrPtr("0% 90%"), TTMLTextAlign: astikit.StrPtr("center"), WebVTTAlign: "center", WebVTTLine: "0%", WebVTTLines: 2, WebVTTPosition: &astisub.WebVTTPosition{XPosition: "90%"}, WebVTTRegionAnchor: "0%,100%", WebVTTScroll: "", WebVTTSize: "100%", WebVTTViewportAnchor: "0%,100%", WebVTTWidth: "100%"}, Style: s.Styles["style_2"]}, *s.Styles["style_0"])
assert.Equal(t, astisub.Style{ID: "style_1", InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorWhite, TTMLColor: astisub.ColorWhite, TTMLExtent: astikit.StrPtr("100% 13%"), TTMLFontFamily: astikit.StrPtr("sansSerif"), TTMLFontStyle: astikit.StrPtr("normal"), TTMLOrigin: astikit.StrPtr("0% 87%"), TTMLTextAlign: astikit.StrPtr("center"), WebVTTAlign: "center", WebVTTLine: "0%", WebVTTLines: 2, WebVTTPosition: &astisub.WebVTTPosition{XPosition: "87%"}, WebVTTRegionAnchor: "0%,100%", WebVTTScroll: "", WebVTTSize: "100%", WebVTTViewportAnchor: "0%,100%", WebVTTWidth: "100%"}}, *s.Styles["style_1"])
assert.Equal(t, astisub.Style{ID: "style_2", InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorWhite, TTMLColor: astisub.ColorWhite, TTMLExtent: astikit.StrPtr("100% 20%"), TTMLFontFamily: astikit.StrPtr("sansSerif"), TTMLFontStyle: astikit.StrPtr("normal"), TTMLOrigin: astikit.StrPtr("0% 80%"), TTMLTextAlign: astikit.StrPtr("center"), WebVTTAlign: "center", WebVTTLine: "0%", WebVTTLines: 4, WebVTTPosition: &astisub.WebVTTPosition{XPosition: "80%"}, WebVTTRegionAnchor: "0%,100%", WebVTTScroll: "", WebVTTSize: "100%", WebVTTViewportAnchor: "0%,100%", WebVTTWidth: "100%"}}, *s.Styles["style_2"])
// Regions
assert.Equal(t, 3, len(s.Regions))
assert.Equal(t, astisub.Region{ID: "region_0", Style: s.Styles["style_0"], InlineStyle: &astisub.StyleAttributes{STLColor: astisub.ColorBlue, TTMLColor: astisub.ColorBlue}}, *s.Regions["region_0"])
Expand Down
68 changes: 38 additions & 30 deletions webvtt.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,45 +534,53 @@ func (s Subtitles) WriteToWebVTT(o io.Writer) (err error) {

sort.Strings(k)
for _, id := range k {
c = append(c, []byte("Region: id="+s.Regions[id].ID)...)
// W3C WebVTT Spec: REGION blocks use multi-line format with colon-separated settings
c = append(c, []byte("REGION")...)
c = append(c, bytesLineSeparator...)
c = append(c, []byte("id:"+s.Regions[id].ID)...)
c = append(c, bytesLineSeparator...)

if s.Regions[id].InlineStyle.WebVTTWidth != "" {
c = append(c, []byte("width:"+s.Regions[id].InlineStyle.WebVTTWidth)...)
c = append(c, bytesLineSeparator...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTWidth != "" {
c = append(c, []byte("width:"+s.Regions[id].Style.InlineStyle.WebVTTWidth)...)
c = append(c, bytesLineSeparator...)
}

if s.Regions[id].InlineStyle.WebVTTLines != 0 {
c = append(c, bytesSpace...)
c = append(c, []byte("lines="+strconv.Itoa(s.Regions[id].InlineStyle.WebVTTLines))...)
c = append(c, []byte("lines:"+strconv.Itoa(s.Regions[id].InlineStyle.WebVTTLines))...)
c = append(c, bytesLineSeparator...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTLines != 0 {
c = append(c, bytesSpace...)
c = append(c, []byte("lines="+strconv.Itoa(s.Regions[id].Style.InlineStyle.WebVTTLines))...)
c = append(c, []byte("lines:"+strconv.Itoa(s.Regions[id].Style.InlineStyle.WebVTTLines))...)
c = append(c, bytesLineSeparator...)
}

if s.Regions[id].InlineStyle.WebVTTViewportAnchor != "" {
c = append(c, []byte("viewportanchor:"+s.Regions[id].InlineStyle.WebVTTViewportAnchor)...)
c = append(c, bytesLineSeparator...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTViewportAnchor != "" {
c = append(c, []byte("viewportanchor:"+s.Regions[id].Style.InlineStyle.WebVTTViewportAnchor)...)
c = append(c, bytesLineSeparator...)
}

if s.Regions[id].InlineStyle.WebVTTRegionAnchor != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("regionanchor="+s.Regions[id].InlineStyle.WebVTTRegionAnchor)...)
c = append(c, []byte("regionanchor:"+s.Regions[id].InlineStyle.WebVTTRegionAnchor)...)
c = append(c, bytesLineSeparator...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTRegionAnchor != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("regionanchor="+s.Regions[id].Style.InlineStyle.WebVTTRegionAnchor)...)
c = append(c, []byte("regionanchor:"+s.Regions[id].Style.InlineStyle.WebVTTRegionAnchor)...)
c = append(c, bytesLineSeparator...)
}

if s.Regions[id].InlineStyle.WebVTTScroll != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("scroll="+s.Regions[id].InlineStyle.WebVTTScroll)...)
c = append(c, []byte("scroll:"+s.Regions[id].InlineStyle.WebVTTScroll)...)
c = append(c, bytesLineSeparator...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTScroll != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("scroll="+s.Regions[id].Style.InlineStyle.WebVTTScroll)...)
}
if s.Regions[id].InlineStyle.WebVTTViewportAnchor != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("viewportanchor="+s.Regions[id].InlineStyle.WebVTTViewportAnchor)...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTViewportAnchor != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("viewportanchor="+s.Regions[id].Style.InlineStyle.WebVTTViewportAnchor)...)
}
if s.Regions[id].InlineStyle.WebVTTWidth != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("width="+s.Regions[id].InlineStyle.WebVTTWidth)...)
} else if s.Regions[id].Style != nil && s.Regions[id].Style.InlineStyle != nil && s.Regions[id].Style.InlineStyle.WebVTTWidth != "" {
c = append(c, bytesSpace...)
c = append(c, []byte("width="+s.Regions[id].Style.InlineStyle.WebVTTWidth)...)
c = append(c, []byte("scroll:"+s.Regions[id].Style.InlineStyle.WebVTTScroll)...)
c = append(c, bytesLineSeparator...)
}
c = append(c, bytesLineSeparator...)
}
if len(s.Regions) > 0 {

// Add blank line after each REGION block
c = append(c, bytesLineSeparator...)
}

Expand Down