[xiph-commits] r4017 - in itext: . javascript

silvia at svn.annodex.net silvia at svn.annodex.net
Wed Sep 16 01:50:09 PDT 2009


Author: silvia
Date: 2009-09-16 01:50:09 -0700 (Wed, 16 Sep 2009)
New Revision: 4017

Modified:
   itext/
   itext/chocolate_rain.html
   itext/javascript/subtitles.js
Log:
Fixed some weird CSS bug that changed the width of the text elements when changing left offset.
I think it's a bug in Firefox's CSS model...
Added comments to explain the experiment.



Property changes on: itext
___________________________________________________________________
Modified: bzr:revision-info
   - timestamp: 2009-09-16 15:03:53.638000011 +1000
committer: Silvia Pfeiffer <silvia.pfeiffer at vquence.com>
properties: 
	branch-nick: silvia

   + timestamp: 2009-09-16 15:40:39.594000101 +1000
committer: Silvia Pfeiffer <silvia.pfeiffer at vquence.com>
properties: 
	branch-nick: silvia

Modified: bzr:file-ids
   - chocolate_rain.html	chocolate_rain.html-20090914132633-q8uc7crdfdazkj8r-1
elephant_no_skin.html	elephant_no_skin.htm-20090802130343-dlzxqj7cts3o0n1v-1
elephant_with_skin.html	elephant.html-20090801091219-j75rjxuqu8rsxt53-1
index.html	index.html-20090718094218-d45036mvytq5pecp-3
javascript/subtitles.js	subtitles.js-20090718094218-d45036mvytq5pecp-10
skins/schmucker/tinyvid.js	tinyvid.js-20090718094218-d45036mvytq5pecp-53
styles/subtitles.css	subtitles.css-20090718094218-d45036mvytq5pecp-13

   + chocolate_rain.html	chocolate_rain.html-20090914132633-q8uc7crdfdazkj8r-1
javascript/subtitles.js	subtitles.js-20090718094218-d45036mvytq5pecp-10

Modified: bzr:revision-id:v4
   - 1 silvia.pfeiffer at vquence.com-20090713110521-cz7evclxohf4rbs2
2 silvia.pfeiffer at vquence.com-20090714003359-apmpuor2ttarph5n
3 silvia.pfeiffer at vquence.com-20090714143931-q6j8ritt91jn5rhu
4 silvia.pfeiffer at vquence.com-20090718094222-58zgcmsg9gggbnt1
5 silvia.pfeiffer at vquence.com-20090718094708-wb83p9u6jr1xlhm6
6 silvia.pfeiffer at vquence.com-20090718095409-p6en5qufj62m8w3h
7 silvia.pfeiffer at vquence.com-20090718113424-9s8cmt1guxj6qoky
8 silvia.pfeiffer at vquence.com-20090718113445-n0q9c14w4i11pe36
9 silvia.pfeiffer at vquence.com-20090718123622-xdp52y76dvpem2ya
10 silvia.pfeiffer at vquence.com-20090718131644-69y0zml0ccbwc5er
11 silvia.pfeiffer at vquence.com-20090719002119-ekzto9pc7jqs3gw9
12 silvia.pfeiffer at vquence.com-20090719120832-srm8qemvr5jjy67w
13 silvia.pfeiffer at vquence.com-20090719130420-s7xjh35zrfj8117x
14 silvia.pfeiffer at vquence.com-20090720065454-m2g8tcjgpgw8aetr
15 silvia.pfeiffer at vquence.com-20090720131039-ivpstebztd7u3vwx
16 silvia.pfeiffer at vquence.com-20090720190949-r4ahzq2regl7opf1
17 silvia.pfeiffer at vquence.com-20090720210510-i54efp8a9sem4g6g
18 silvia.pfeiffer at vquence.com-20090721063829-4pvft92pnt7k966p
19 silvia.pfeiffer at vquence.com-20090721065410-0miir37pbb73k35r
20 silvia.pfeiffer at vquence.com-20090721065911-9ngk00aeujudpw8p
21 silvia.pfeiffer at vquence.com-20090721121059-uthu2kmvu74zjv06
22 silvia.pfeiffer at vquence.com-20090721125735-lwwo9ivbdhj0jdhp
23 silvia.pfeiffer at vquence.com-20090721130655-sdqdgbs0lexyrwh5
24 silvia.pfeiffer at vquence.com-20090721143346-065b9v0rr1tcmyg0
25 silvia.pfeiffer at vquence.com-20090722010421-9sx8ynfzcoxh1eai
26 silvia.pfeiffer at vquence.com-20090722014433-yrqaapi0kmfec1oh
27 silvia.pfeiffer at vquence.com-20090722062945-586zxe3smxv1gdcw
28 silvia.pfeiffer at vquence.com-20090727123838-lcxe2fb7n2111ipd
29 silvia.pfeiffer at vquence.com-20090728151700-ai24t8itvj8hxs0c
30 silvia.pfeiffer at vquence.com-20090728210031-2n53wzpuledyqg9w
31 silvia.pfeiffer at vquence.com-20090730034353-pcrnaae01i2q5430
32 silvia.pfeiffer at vquence.com-20090731122706-nrrle33ore1cjl87
33 silvia.pfeiffer at vquence.com-20090801092101-zyu1s0ntmio5bihb
34 silvia.pfeiffer at vquence.com-20090801092534-5pvl2ehkqi87p9le
35 silvia.pfeiffer at vquence.com-20090801233833-xa51k548ng1tqxso
36 silvia.pfeiffer at vquence.com-20090802130400-k998eftqulgcrp04
37 silvia.pfeiffer at vquence.com-20090802143005-c1sm52ru0kfed912
38 silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
39 silvia.pfeiffer at vquence.com-20090827061950-6fu26p80jdvdh50c
40 silvia.pfeiffer at vquence.com-20090901040002-3qs6tqiqcod3cda2
41 silvia.pfeiffer at vquence.com-20090901040227-o491w2qkp79a2a3r
42 silvia.pfeiffer at vquence.com-20090901040449-3xtimieabhw7fu7o
43 silvia.pfeiffer at vquence.com-20090901051757-h9l9753jy47x87zy
44 silvia.pfeiffer at vquence.com-20090901132958-3i65nroyeciazei3
45 silvia.pfeiffer at vquence.com-20090901230635-adfp1v5h24nvg30q
46 silvia.pfeiffer at vquence.com-20090902004049-ssqjbhtpz737oc90
47 silvia.pfeiffer at vquence.com-20090902022932-omg01n8yn6gg853c
48 silvia.pfeiffer at vquence.com-20090903010501-3vehjdbaxv2gyzzf
49 silvia.pfeiffer at vquence.com-20090912064418-3jw90gm7r0d2jjzk
50 silvia.pfeiffer at vquence.com-20090912065734-rx0kxsolg43lssa3
51 silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
52 silvia.pfeiffer at vquence.com-20090912152710-r2ga9oa451rmxgym
53 silvia.pfeiffer at vquence.com-20090912152945-l5voojx7ripnzono
54 silvia.pfeiffer at vquence.com-20090914014851-pt8aboskjyfhwecd
55 silvia.pfeiffer at vquence.com-20090914113345-t47n88dsqglme076
56 silvia.pfeiffer at vquence.com-20090914121706-2psey2lbp8tb70b6
57 silvia.pfeiffer at vquence.com-20090914121815-f09keijembthe6ug
58 silvia.pfeiffer at vquence.com-20090914124523-vlmi9jit1ztrgyu3
59 silvia.pfeiffer at vquence.com-20090914124902-2pcmkycne7fqfgv5
60 silvia.pfeiffer at vquence.com-20090914132553-o2ei9fl4706yjm1o
61 silvia.pfeiffer at vquence.com-20090914133103-hl9er0prbgvnht0w
62 silvia.pfeiffer at vquence.com-20090914134303-0jj8xyql5ixmd1ce
63 silvia.pfeiffer at vquence.com-20090914134859-gzoqbvy6hp73j2ij
64 silvia.pfeiffer at vquence.com-20090916050353-ulfo15y9sl4x03ep

   + 1 silvia.pfeiffer at vquence.com-20090713110521-cz7evclxohf4rbs2
2 silvia.pfeiffer at vquence.com-20090714003359-apmpuor2ttarph5n
3 silvia.pfeiffer at vquence.com-20090714143931-q6j8ritt91jn5rhu
4 silvia.pfeiffer at vquence.com-20090718094222-58zgcmsg9gggbnt1
5 silvia.pfeiffer at vquence.com-20090718094708-wb83p9u6jr1xlhm6
6 silvia.pfeiffer at vquence.com-20090718095409-p6en5qufj62m8w3h
7 silvia.pfeiffer at vquence.com-20090718113424-9s8cmt1guxj6qoky
8 silvia.pfeiffer at vquence.com-20090718113445-n0q9c14w4i11pe36
9 silvia.pfeiffer at vquence.com-20090718123622-xdp52y76dvpem2ya
10 silvia.pfeiffer at vquence.com-20090718131644-69y0zml0ccbwc5er
11 silvia.pfeiffer at vquence.com-20090719002119-ekzto9pc7jqs3gw9
12 silvia.pfeiffer at vquence.com-20090719120832-srm8qemvr5jjy67w
13 silvia.pfeiffer at vquence.com-20090719130420-s7xjh35zrfj8117x
14 silvia.pfeiffer at vquence.com-20090720065454-m2g8tcjgpgw8aetr
15 silvia.pfeiffer at vquence.com-20090720131039-ivpstebztd7u3vwx
16 silvia.pfeiffer at vquence.com-20090720190949-r4ahzq2regl7opf1
17 silvia.pfeiffer at vquence.com-20090720210510-i54efp8a9sem4g6g
18 silvia.pfeiffer at vquence.com-20090721063829-4pvft92pnt7k966p
19 silvia.pfeiffer at vquence.com-20090721065410-0miir37pbb73k35r
20 silvia.pfeiffer at vquence.com-20090721065911-9ngk00aeujudpw8p
21 silvia.pfeiffer at vquence.com-20090721121059-uthu2kmvu74zjv06
22 silvia.pfeiffer at vquence.com-20090721125735-lwwo9ivbdhj0jdhp
23 silvia.pfeiffer at vquence.com-20090721130655-sdqdgbs0lexyrwh5
24 silvia.pfeiffer at vquence.com-20090721143346-065b9v0rr1tcmyg0
25 silvia.pfeiffer at vquence.com-20090722010421-9sx8ynfzcoxh1eai
26 silvia.pfeiffer at vquence.com-20090722014433-yrqaapi0kmfec1oh
27 silvia.pfeiffer at vquence.com-20090722062945-586zxe3smxv1gdcw
28 silvia.pfeiffer at vquence.com-20090727123838-lcxe2fb7n2111ipd
29 silvia.pfeiffer at vquence.com-20090728151700-ai24t8itvj8hxs0c
30 silvia.pfeiffer at vquence.com-20090728210031-2n53wzpuledyqg9w
31 silvia.pfeiffer at vquence.com-20090730034353-pcrnaae01i2q5430
32 silvia.pfeiffer at vquence.com-20090731122706-nrrle33ore1cjl87
33 silvia.pfeiffer at vquence.com-20090801092101-zyu1s0ntmio5bihb
34 silvia.pfeiffer at vquence.com-20090801092534-5pvl2ehkqi87p9le
35 silvia.pfeiffer at vquence.com-20090801233833-xa51k548ng1tqxso
36 silvia.pfeiffer at vquence.com-20090802130400-k998eftqulgcrp04
37 silvia.pfeiffer at vquence.com-20090802143005-c1sm52ru0kfed912
38 silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
39 silvia.pfeiffer at vquence.com-20090827061950-6fu26p80jdvdh50c
40 silvia.pfeiffer at vquence.com-20090901040002-3qs6tqiqcod3cda2
41 silvia.pfeiffer at vquence.com-20090901040227-o491w2qkp79a2a3r
42 silvia.pfeiffer at vquence.com-20090901040449-3xtimieabhw7fu7o
43 silvia.pfeiffer at vquence.com-20090901051757-h9l9753jy47x87zy
44 silvia.pfeiffer at vquence.com-20090901132958-3i65nroyeciazei3
45 silvia.pfeiffer at vquence.com-20090901230635-adfp1v5h24nvg30q
46 silvia.pfeiffer at vquence.com-20090902004049-ssqjbhtpz737oc90
47 silvia.pfeiffer at vquence.com-20090902022932-omg01n8yn6gg853c
48 silvia.pfeiffer at vquence.com-20090903010501-3vehjdbaxv2gyzzf
49 silvia.pfeiffer at vquence.com-20090912064418-3jw90gm7r0d2jjzk
50 silvia.pfeiffer at vquence.com-20090912065734-rx0kxsolg43lssa3
51 silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
52 silvia.pfeiffer at vquence.com-20090912152710-r2ga9oa451rmxgym
53 silvia.pfeiffer at vquence.com-20090912152945-l5voojx7ripnzono
54 silvia.pfeiffer at vquence.com-20090914014851-pt8aboskjyfhwecd
55 silvia.pfeiffer at vquence.com-20090914113345-t47n88dsqglme076
56 silvia.pfeiffer at vquence.com-20090914121706-2psey2lbp8tb70b6
57 silvia.pfeiffer at vquence.com-20090914121815-f09keijembthe6ug
58 silvia.pfeiffer at vquence.com-20090914124523-vlmi9jit1ztrgyu3
59 silvia.pfeiffer at vquence.com-20090914124902-2pcmkycne7fqfgv5
60 silvia.pfeiffer at vquence.com-20090914132553-o2ei9fl4706yjm1o
61 silvia.pfeiffer at vquence.com-20090914133103-hl9er0prbgvnht0w
62 silvia.pfeiffer at vquence.com-20090914134303-0jj8xyql5ixmd1ce
63 silvia.pfeiffer at vquence.com-20090914134859-gzoqbvy6hp73j2ij
64 silvia.pfeiffer at vquence.com-20090916050353-ulfo15y9sl4x03ep
65 silvia.pfeiffer at vquence.com-20090916054039-85bubhzxxxsnocce

Modified: bzr:text-parents
   - elephant_no_skin.html	silvia.pfeiffer at vquence.com-20090914132553-o2ei9fl4706yjm1o
elephant_with_skin.html	silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
index.html	silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
javascript/subtitles.js	silvia.pfeiffer at vquence.com-20090914124902-2pcmkycne7fqfgv5
skins/schmucker/tinyvid.js	silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
styles/subtitles.css	silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw

   + 

Modified: itext/chocolate_rain.html
===================================================================
--- itext/chocolate_rain.html	2009-09-16 05:04:47 UTC (rev 4016)
+++ itext/chocolate_rain.html	2009-09-16 08:50:09 UTC (rev 4017)
@@ -51,9 +51,11 @@
     
     <h1>Demo Video and Audio Lyrics</h1>
 
-  <div class="videocontainer" style="position: relative; display: inline-block;">
+    
+  <div class="videocontainer" style="position: relative; display: inline-block; float: left;">
+    <p>A video element with subtitles:</p>
 
-	  <div class="mc" style="float: left;" width="320px">
+	  <div class="mc" style="" width="320px">
       <div id="itextcontainer1"></div>
 	    <video class="v" src="chocolate_rain/chocolate_rain.ogv"
 	           poster="chocolate_rain/chocolate_rain.png" controls aria-label="Chocolate Rain video"
@@ -65,9 +67,10 @@
 
   </div>
 
-  <div class="audiocontainer" style="position: relative; display: inline-block;">
+  <div class="audiocontainer" style="position: relative; display: inline-block; float: left; margin-left: 20px;">
+    <p>A audio element with lyrics:</p>
 
-    <div class="mc" style="float: right;" width="320px">
+    <div class="mc" style="margin-top: 100px;" width="320px">
       <div id="itextcontainer2"></div>
       <audio class="a" src="chocolate_rain/chocolate_rain.ogg"
            controls aria-label="Chocolate Rain song"
@@ -79,7 +82,10 @@
 
   </div>
 
+  <div id="content" style="clear: both;">
+</div>
 
+
 <script type="text/javascript">  
   // get video and audio element
   var video = document.getElementsByTagName("video")[0];
@@ -109,7 +115,31 @@
 
 <p>Note: The demo works best in Firefox version >= 3.5, but also in the latest experimental releases of Safari (with XiphQT installed), Opera and Chrome. It will not work in IE.</p>
 
+<p>This is a demo of audio and video accessibility. Features:</p>
 
+<ul>
+  <li>contains subtitles for the video and lyrics for the audio, both using a file written in lrc format</li>
+  <li>the subtitles and lyrics are displayed as overlays for the video and audio elements into div elements that have been pre-defined for them</li>
+</ul>
+
+<p>The main elements of this Web page are:</p>
+<pre>
+  &lt;video class="v" src="chocolate_rain/chocolate_rain.ogv"
+         poster="chocolate_rain/chocolate_rain.png" controls aria-label="Chocolate Rain video"
+         autobuffer title="Chocolate Rain video">
+    &lt;itext id="lyrics" lang="en" type="text/lrc" display="yes"
+           src="chocolate_rain/chocolaterain.lrc" category="SUB">&lt;/itext>
+  &lt;/video>
+</pre>
+<pre>
+  &lt;audio class="a" src="chocolate_rain/chocolate_rain.ogg"
+       controls aria-label="Chocolate Rain song"
+       autobuffer title="Chocolate Rain song">
+    &lt;itext id="lyrics" lang="en" type="text/lrc" display="yes"
+           src="chocolate_rain/chocolaterain.lrc" category="LRC">&lt;/itext>
+  &lt;/audio>
+</pre>
+
 <h2>Credits</h2>
 
 <p>The demo was created by Silvia Pfeiffer <a href="https://wiki.mozilla.org/Accessibility/Experiment1_feedback">for Mozilla</a> to explore video and audio accessibility approaches with the new HTML5 video tag.</p>

Modified: itext/javascript/subtitles.js
===================================================================
--- itext/javascript/subtitles.js	2009-09-16 05:04:47 UTC (rev 4016)
+++ itext/javascript/subtitles.js	2009-09-16 08:50:09 UTC (rev 4017)
@@ -602,7 +602,6 @@
 			if (content[i]) {
 				// replace content of itext div
 				if (jQuery("#" + this.div_id + " > .itext_" + i).html() !== content[i]) {
-console.log(jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width"));
 					jQuery("#" + this.div_id + " > .itext_" + i).html(content[i]);
 					if (i === "CUE") {
 						jQuery("#" + this.div_id + " > .itext_" + i + " > .text").prepend("Chapter: ");
@@ -615,8 +614,11 @@
 					if (i === "LRC") {
 						jQuery("#" + this.div_id + " > .itext_LRC").css("max-width", mc_width + "px");
 						jQuery("#" + this.div_id + " > .itext_LRC").css("bottom", "38px");					
+						// somehow the setting of "left" encourages the correct width to be calculated
+						// if I don't do that, the width calculation in text_half_length is too short on some elements
+						jQuery("#" + this.div_id + " > .itext_" + i).css("left",5);
 						var text_half_length = jQuery("#" + this.div_id + " > .itext_LRC > .text").css("width").substr(0, jQuery("#" + this.div_id + " > .itext_LRC > .text").css("width").length - 2) / 2;
-						jQuery("#" + this.div_id + " > .itext_LRC").css("left", ((mc_width / 2) - text_half_length - 14) + "px");
+						jQuery("#" + this.div_id + " > .itext_LRC").css("left", ((mc_width / 2) - text_half_length - 7) + "px");
 					}
 					jQuery("#" + this.div_id + " > .itext_" + i).css("visibility", "visible");
 					if (i === "CC" ||
@@ -625,15 +627,13 @@
 		      			i === "TRX" ||
 		      			i === "LIN") {
 						// anyone with a better idea for how to place the captions bottom center, please speak up
-//						jQuery("#" + this.div_id + " > .itext_" + i).css("max-width", mc_width + "px");
+						jQuery("#" + this.div_id + " > .itext_" + i).css("max-width", mc_width + "px");
 						jQuery("#" + this.div_id + " > .itext_" + i).css("bottom", "23px");
+						// somehow the setting of "left" encourages the correct width to be calculated
+						// if I don't do that, the width calculation in text_half_length is too short on some elements
+						jQuery("#" + this.div_id + " > .itext_" + i).css("left",5);
 						var text_half_length = jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width").substr(0, jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width").length - 2) / 2;
-//console.log(text_half_length);
-//console.log(((mc_width / 2) - text_half_length - 7));
-console.log(jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width"));
 						jQuery("#" + this.div_id + " > .itext_" + i).css("left", ((mc_width / 2) - text_half_length - 7) + "px");
-console.log("inside");
-console.log(jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width"));
 					}
 				}
 			} else {



More information about the commits mailing list