search

sandflow / imscJS

JavaScript library for rendering IMSC Text and Image Profile documents to HTML5
BSD 2-Clause "Simplified" License
83 stars 31 forks source link

Issue rendering Japanese shearing - Cropped by Region #260

Closed BHolterMedia closed 6 days ago

BHolterMedia commented 1 week ago

Pierre -

I think I found an issue with japanese character rendering, specifically when using vertical text with shearing.

Please see attached file 65 065.png exported from the 1.1 renderer online. This is sourced from the attached IMSC from the IMSC 1.1 test reel currently hosted on github named IMSC1-1_TEXT_Test-Reel_FMS_v4-0-1_2019-11-20.xml. This render does not match the original render from 2019 that we leveraged while authoring the test reel.

I included an additional test IMSC asset and screengrab as an additional illustration: 1.png, 2.png JapaneseRegions-Brian 2.xml

65 065 1 IMSC1-1_TEXT_Test-Reel_FMS_v4-0-1_2019-11-20.xml.zip JapaneseRegions-Brian 2.xml.zip 2

BHolterMedia commented 1 week ago

I should have noted, the cropped character is in the top left of the frames. The IMSC test reel event occurs at frame 1560.

palemieux commented 1 week ago

AFAIK CSS does not yet support block shearing -- see discussion at https://github.com/w3c/csswg-drafts/issues/2983.

Instead imscJS uses skewX() and skewY(), which clips unless tts:overflow="visible".

To make a long story short, set tts:overflow="visible" and have a transparent background or make sure the sheared text does not overflow the region, e.g., by centering.

nigelmegitt commented 1 week ago

Pre-pending one or two non-breaking space character might help, if you want to keep the current alignment.

BHolterMedia commented 6 days ago

Thanks! I dont seem to remember this when we made the IMSC test reel, but it must have been there then too. Thanks for clarifying.

palemieux commented 6 days ago

@BHolterMedia please provide your input on the CSS issue above if you believe that block shearing would be a good addition to the web platform.