Apparent double nesting of rubies impacting ruby/bouten spacing and baseline shifts (when rubyReserve is used)

[jbaden]

Hello,

There appears to be a bug in IMSC.js resulting in double/nested rubies when rubyReserve is used. This issue is illustrated in the attached test file rubyReserve005_NFLX_Sample.xml.zip

In order to render correctly, ruby events appear to require non-space characters at the beginning of a line both before and outside of the ruby container. That is to say, a ruby event cannot begin with tts:ruby="container" else this double/nested ruby rendering issue will occur.

without non-space character

            <p begin="850000000t" dur="10000000t" region="bottom-left-justified">
                <span style="ruby-outside-container"><span style="ruby-base">太孫</span><span style="ruby-text">たいそん</span></span>のペクチョンを連れ<br/>
                <span style="ruby-outside-container"><span style="ruby-base">北漢</span><span style="ruby-text">プッカン</span></span>山に登り</p>       

with non-space character

            <p begin="870000000t" dur="10000000t" region="bottom-left-justified">
                太<span style="ruby-outside-container"><span style="ruby-base">太孫</span><span style="ruby-text">たいそん</span></span>のペクチョンを連れ<br/>
                太<span style="ruby-outside-container"><span style="ruby-base">北漢</span><span style="ruby-text">プッカン</span></span>山に登り</p> 

[palemieux]

To polyfill tts:rubyReserve, applyRubyReserve() inserts a zero-width ruby annotation before the first HTML span in each line. This breaks if the first span is itself within a ruby annotation. Probably can be fixed.

imscJS/src/main/js/html.js

Line 782 in 060e583

var e = lineList[i].elements[0].node.parentElement.insertBefore(

[jbaden]

Thank you, @palemieux!

Would you happen to have a target date for the 1.1.2 release?

Much Appreciated,
Justin

[palemieux]

Would you happen to have a target date for the 1.1.2 release?

@jbaden It would be good to catch all blocking issues in that release. Anything else from you?

[palemieux]

@jbaden See #187. I have deployed it at http://sandflow.com/imsc1_1/index.html (be sure to hit Shift-F5). Looking forward to your feedback.

[jbaden]

Thank you, @palemieux. It looks like this issue has now been resolved. That said, I did want to call your attention to what I believe to be a browser-related issue. There appears to be relative movement of the baseline text in the 1-line event "with" and "without" rubies. See events timed at (88 & 89). I noticed that this very slight shift only occurs in Firefox, but not in Chrome, which makes me think this is more of a browser issue and not an issue with imscJS. Thanks!

[palemieux]

@jbaden Thanks for the review. The issue at #184 (comment) was in fact caused by style properties not being copied correctly to the hidden ruby element emulating rubyReserve, i.e. Firefox was correct and Chrome incorrect. It is fixed now.

[jbaden]

Hi @palemieux,

After further testing and review, I believe the rubyReserve issue you identified may also impact boutens (tts:textEmphasis).

"To polyfill tts:rubyReserve, applyRubyReserve() inserts a zero-width ruby annotation before the first HTML span in each line. This breaks if the first span is itself within a ruby annotation. Probably can be fixed."

In the following XML excerpts & corresponding images generated from IMSC11 Renderer, I've noticed that the baseline shifts when boutens are applied if they are exercised at the very beginning of a line (Example 2). In Example 3, I've added punctuation before the tts:textEmphasis span and the baseline is preserved (as expected with rubyReserve):

Example 1

2-line Horizontal Event without Boutens; with rubyReserve:
<p begin="100000000t" dur="20000000t" region="bottom-left-justified" ebutts:multiRowAlign="start">強調したい時に使<br/>強調したい時に使</p>

Example 2

2-line Horizontal Event with Boutens + rubyReserve (no preceding character/punctuation before span tts:textEmphasis)
<p begin="120000000t" dur="20000000t" region="bottom-left-justified" ebutts:multiRowAlign="start"><span style="bouten-filled-circle-outside">強調したい時に使<br/>強調したい時に使</span></p>

Example 3

2-line Horizontal Event with Boutens + rubyReserve (with a preceding character/punctuation before span tts:textEmphasis)

<p begin="140000000t" dur="20000000t" region="bottom-left-justified" ebutts:multiRowAlign="start">〝<span tts:textEmphasis="filled circle before">強</span><span tts:textEmphasis="filled circle before">調</span><span tts:textEmphasis="filled circle before">し</span><span tts:textEmphasis="filled circle before">た</span><span tts:textEmphasis="filled circle before">い</span><span tts:textEmphasis="filled circle before">時</span><span tts:textEmphasis="filled circle before">に</span><span tts:textEmphasis="filled circle before">使</span><br/><span>　</span><span tts:textEmphasis="filled circle after">強</span><span tts:textEmphasis="filled circle after">調</span><span tts:textEmphasis="filled circle after">し</span><span tts:textEmphasis="filled circle after">た</span><span tts:textEmphasis="filled circle after">い</span><span tts:textEmphasis="filled circle after">時</span><span tts:textEmphasis="filled circle after">に</span><span tts:textEmphasis="filled circle after">使</span>〞</p>

Test file:
RubyReserve_withBoutens_001.xml.zip

[palemieux]

@jbaden Yes, it looks like the issue is with the double application of boutens. See simpler example below. Can you open a different issue?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<tt xml:lang="ja" xmlns="http://www.w3.org/ns/ttml" ttp:contentProfiles="http://www.w3.org/ns/ttml/profile/imsc1.1/text" xmlns:tts="http://www.w3.org/ns/ttml#styling" xmlns:ttm="http://www.w3.org/ns/ttml#metadata" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" ttp:timeBase="media" ttp:frameRate="24" ttp:frameRateMultiplier="1000 1001" ttp:tickRate="10000000" xmlns:ebutts="urn:ebu:tt:style" xmlns:itts="http://www.w3.org/ns/ttml/profile/imsc1#styling" xmlns:ittp="http://www.w3.org/ns/ttml/profile/imsc1#parameter" xmlns:ittm="http://www.w3.org/ns/ttml/profile/imsc1#metadata">
	<head>
		<styling>
			<initial tts:color="white" tts:fontFamily="proportionalSansSerif" tts:fontSize="100%" xml:id="initialStyles"/>
			
			<!-- bouten style -->
			<style tts:textEmphasis="filled circle outside" xml:id="bouten-filled-circle-outside"/>
		</styling>
		<layout>
			<!-- General Horiztonal Positioning with ebutts:multiRowAlign -->
			<region ebutts:multiRowAlign="start" tts:displayAlign="after" tts:extent="80.000% 80.000%" tts:origin="10.000% 10.000%" tts:rubyReserve="outside" tts:textAlign="center" xml:id="bottom-left-justified"/>
		
		</layout>
	</head>
	<body>
		<div>
			<p begin="120000000t" dur="10000000t" region="bottom-left-justified" ebutts:multiRowAlign="start"><span style="bouten-filled-circle-outside">強<br/>強</span></p>
      <p begin="130000000t" dur="10000000t" region="bottom-left-justified" ebutts:multiRowAlign="start"><span style="bouten-filled-circle-outside">強</span><br/><span style="bouten-filled-circle-outside">強</span></p>
	    </div>
	</body>
</tt>

EDIT: Clarified it is unrelated to <br>.