1/** 2 * 3 * XHTML 1.1 Ruby markup suffers from the "browsers don't always bother to obey CSS" problem. 4 * The standard way to visualise ruby is by making the ruby code an inline table, and bottom 5 * aligning it. However, not all browsers understand "bottom". or "baseline". This javascript 6 * will try to make sure the ruby placement is correct for all major browsers by detecting the 7 * browser, and modifying the ruby CSS rules accordingly. 8 * 9 * - Mike "Pomax" Kamermans 10 */ 11 12// ---------------------------------------------------------------------------------------------------------------------- 13// CSS MANIPULATION 14// 15// based on http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript 16// ---------------------------------------------------------------------------------------------------------------------- 17 18function getCSSRule(ruleName, deleteFlag) { 19 ruleName=ruleName.toLowerCase(); 20 if (document.styleSheets) { 21 for (var i=0; i<document.styleSheets.length; i++) { 22 var styleSheet=document.styleSheets[i]; 23 var ii=0; 24 var cssRule=false; 25 do { 26 if (styleSheet.cssRules) { cssRule = styleSheet.cssRules[ii]; } 27 else { cssRule = styleSheet.rules[ii]; } 28 if (cssRule) { 29 if (cssRule.selectorText.toLowerCase()==ruleName) { 30 if (deleteFlag=='delete') { 31 if (styleSheet.cssRules) { styleSheet.deleteRule(ii); } 32 else { styleSheet.removeRule(ii); } 33 return true; } 34 else { return cssRule; }}} 35 ii++; 36 } 37 while (cssRule) }} 38 return false;} 39 40function killCSSRule(ruleName) { return getCSSRule(ruleName,'delete'); } 41 42function addCSSRule(ruleName) { 43 if (document.styleSheets) { 44 if (!getCSSRule(ruleName)) { 45 if (document.styleSheets[0].addRule) { document.styleSheets[0].addRule(ruleName, null,0); } 46 else { document.styleSheets[0].insertRule(ruleName+' { }', 0); }}} 47 return getCSSRule(ruleName); } 48 49// ---------------------------------------------------------------------------------------------------------------------- 50// Ruby alignment code 51// ---------------------------------------------------------------------------------------------------------------------- 52 53/** 54 * Check which browser render engine we're dealing with 55 */ 56function getBrowser() 57{ 58 var opera="opera"; var ie="ie"; var gecko="gecko"; var chrome = "chrome"; var browser="unknown"; 59 if (window.opera) { browser = opera; } 60 else if (Array.every) { browser = gecko; } 61 else if (document.all) { browser = ie; } 62 else if (window.chrome) { browser = chrome; } 63 return browser; 64} 65 66/** 67 * Different browsers (of fucking course) do different things when using named vertical alignments. 68 * So, even though it's highly undesirable, browser-dependent corrections. 69 */ 70function fixRubyAlignment() 71{ 72 // Webkit and Gecko browsers align properly on "bottom", but other browsers do not... 73 var browser = getBrowser(); 74 var rubyrule = getCSSRule("ruby"); 75 76 // if we're rendering for IE, then annoyingly 'bottom' doesn't align properly. However, we can use 'baseline' instead, and all is well 77 if(browser=="ie") { rubyrule.style.verticalAlign = "baseline"; } 78 // Opera (9.5x) is even more annoying. Neither "bottom" nor "baseline" does what it's supposed to do, so we're left with value (em) manipulation instead. 79 else if(browser=="opera") { rubyrule.style.verticalAlign = "1.3em"; } 80 81 // Chrome 4.x doesn't support ruby unless IT gets to call the CSS shots 82 else if(browser=="chrome") { 83 killCSSRule('rp'); 84 killCSSRule('rt'); 85 killCSSRule('rb'); 86 killCSSRule('ruby'); } 87 // if we don't know what browser this is, assume "bottom" works. If it doesn't, their fault. 88 else { rubyrule.style.verticalAlign = "bottom"; } 89} 90 91 92// ---------------------------------------------------------------------------------------------------------------------- 93// DokuWiki code 94// ---------------------------------------------------------------------------------------------------------------------- 95 96/** 97 * lets dokuwiki schedule the javascript call 98 */ 99addInitEvent(function(){ fixRubyAlignment(); });