DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:xhtmlruby

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Both sides next revision
plugin:xhtmlruby [2010-05-01 00:27]
86.89.151.209
plugin:xhtmlruby [2018-05-31 00:40] (current)
Klap-in
Line 6: Line 6:
 email      : pomax@nihongoresources.com email      : pomax@nihongoresources.com
 type       : Action type       : Action
-lastupdate : 2010-05-01+lastupdate : 2010-10-14
 compatible : 2009-02-14b (not tested on earlier versions) compatible : 2009-02-14b (not tested on earlier versions)
 tags       : ruby, furigana tags       : ruby, furigana
 +
 +downloadurl: http://projects.nihongoresources.com/downloadables/plugin-xhtmlruby.tar.gz
 ---- ----
  
 ===== Download and Installation ===== ===== Download and Installation =====
  
-Download and install the plugin using the [[plugin:plugin|Plugin Manager]] using the following URL. +Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.
- +
-  * [[http://pomax.nihongoresources.com/downloads/plugin-xhtmlruby.tar.gz|tar.gz format (3k)]] +
- +
-To install the plugin manually, download the source to your plugin folder, ''lib/plugins'', and extract its contents That will create a new plugin folder, ''lib/plugins/xhtmlruby'', containing four file:+
  
-  * style.css - CSS styling for the ruby markup +  * [[http://projects.nihongoresources.com/downloadables/plugin-xhtmlruby.tar.gz|tar.gz format (3k)]] FIXME Link not available (as at 12-Sep-2013) 
-  * conf.ini an ini file for setting whether to parse wiki text or not, and TOC text or not. +  * [[http://sites.google.com/site/seifer03/index/dokuwiki_xhtmlruby.zip|zip format (3k)]], Temp Mirror :!:
-  * script.js a script that ensures the CSS styling is correct for the browser that's loading the page +
-  * action.php - the plugin+
  
-The plugin is now installed. 
 ===== Important installation note ===== ===== Important installation note =====
  
Line 96: Line 91:
 ===== Bugs ===== ===== Bugs =====
  
-None known at the time of writing.+<del>None known at the time of writing.</del> 
 + 
 +Unfortunately, on my 2017 Frusterick Manners, this plugin causes <code> 
 +ReferenceError: addInitEvent is not defined 
 +addInitEvent(function(){ fixRubyAlignment(); }); 
 +js.php?...3892c5d (line 65824)</code> 
 + 
 +I have changed ''addInitEvent'' on the last line of script.js to ''jQuery'' (per suggestion on [[plugin:cellbg#compatibility_issues]] although I don't know the reason), but then it's found that on Line 29 ''cssRule.selectorText'' is also not defined... 
 + 
 +So finally I decided to: 
 +  - remove script.js in the plugin folder 
 +  - disable the plugin 
 +  - re-enable it again 
 +-> seems no problem so far, the action.php and the CSS file still do their jobs. I know that script.js can deal some compatibility problems across browsers, but I don't have the ability to debug it. --- [[user>MilchFlasche|MilchFlasche]] //2017-11-03 17:11//
 ===== Source ===== ===== Source =====
  
Line 147: Line 155:
  * XHTML 1.1 Ruby markup suffers from the "browsers don't always bother to obey CSS" problem.  * XHTML 1.1 Ruby markup suffers from the "browsers don't always bother to obey CSS" problem.
  * The standard way to visualise ruby is by making the ruby code an inline table, and bottom  * The standard way to visualise ruby is by making the ruby code an inline table, and bottom
- * aligning it. However, not all browsers understand "bottom". or "baseline". This JavaScript+ * aligning it. However, not all browsers understand "bottom". or "baseline". This javascript
  * will try to make sure the ruby placement is correct for all major browsers by detecting the  * will try to make sure the ruby placement is correct for all major browsers by detecting the
  * browser, and modifying the ruby CSS rules accordingly.  * browser, and modifying the ruby CSS rules accordingly.
Line 154: Line 162:
  */  */
  
-// ---------------------------------------------------------------------+// ----------------------------------------------------------------------------------------------------------------------
 // CSS MANIPULATION // CSS MANIPULATION
 // //
 // based on http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript // based on http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
-// ---------------------------------------------------------------------+// ----------------------------------------------------------------------------------------------------------------------
  
-/** +function getCSSRule(ruleName, deleteFlag) {
-  * returns an associated object with stylesheet -> rule entries. The reason for this is +
-  * that returned rules alone are not enough; the user may need to perform actions based on +
-  * the stylesheet media type or href for instance. +
-  *  +
-  * If no matching rules were found at all, 'false' is returned +
-  */ +
-function getCSSRule(ruleName, deleteFlag) +
-{+
  ruleName=ruleName.toLowerCase();  ruleName=ruleName.toLowerCase();
  if (document.styleSheets) {  if (document.styleSheets) {
- // iterate through all stylesheets + for (var i=0; i<document.styleSheets.length; i++) { 
- for (var sheet=0; sheet<document.styleSheets.length; sheet++) + var styleSheet=document.styleSheets[i]; 
- + var ii=0;
- var styleSheet=document.styleSheets[sheet]; +
- var rule=0;+
  var cssRule=false;  var cssRule=false;
- do + do { 
- + if (styleSheet.cssRules) { cssRule = styleSheet.cssRules[ii]; } 
- if(styleSheet.cssRules) { cssRule = styleSheet.cssRules[rule]; } + else { cssRule = styleSheet.rules[ii]; } 
- else if (styleSheet.rules) { cssRule = styleSheet.rules[rule]; } + if (cssRule)  { 
- if (cssRule && cssRule.selectorText.toLowerCase()==ruleName) { return cssRule; } + if (cssRule.selectorText.toLowerCase()==ruleName) 
- rule++; + if (deleteFlag=='delete') { 
- } while (cssRule); + if (styleSheet.cssRules) { styleSheet.deleteRule(ii);
-+ else { styleSheet.removeRule(ii);
-+ return true; } 
- return false; + else { return cssRule; }}
-}+ ii++; 
 + } 
 + while (cssRule) }} 
 + return false;
 + 
 +function killCSSRule(ruleName) { return getCSSRule(ruleName,'delete');
 + 
 +function addCSSRule(ruleName) { 
 + if (document.styleSheets) { 
 + if (!getCSSRule(ruleName)) { 
 + if (document.styleSheets[0].addRule) { document.styleSheets[0].addRule(ruleName, null,0); 
 + else { document.styleSheets[0].insertRule(ruleName+' { }', 0); }}
 + return getCSSRule(ruleName); }
  
-// -------------------+// ----------------------------------------------------------------------------------------------------------------------
 // Ruby alignment code // Ruby alignment code
-// -------------------+// ----------------------------------------------------------------------------------------------------------------------
  
 /** /**
Line 198: Line 208:
 function getBrowser() function getBrowser()
 { {
- var opera="opera"; var ie="ie"; var gecko="gecko"; var browser="unknown";+ var opera="opera"; var ie="ie"; var gecko="gecko"; var chrome = "chrome"; var browser="unknown";
  if (window.opera) { browser = opera; }  if (window.opera) { browser = opera; }
  else if (Array.every) { browser = gecko; }  else if (Array.every) { browser = gecko; }
  else if (document.all) { browser = ie; }  else if (document.all) { browser = ie; }
 + else if (window.chrome) { browser = chrome; }
  return browser;  return browser;
 } }
Line 219: Line 230:
  // 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.  // 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.
  else if(browser=="opera") { rubyrule.style.verticalAlign = "1.3em"; }  else if(browser=="opera") { rubyrule.style.verticalAlign = "1.3em"; }
 +
  // if we don't know what browser this is, assume "bottom" works. If it doesn't, their fault.  // if we don't know what browser this is, assume "bottom" works. If it doesn't, their fault.
  else { rubyrule.style.verticalAlign = "bottom"; }  else { rubyrule.style.verticalAlign = "bottom"; }
Line 224: Line 236:
  
  
-// -------------+// ----------------------------------------------------------------------------------------------------------------------
 // DokuWiki code // DokuWiki code
-// -------------+// ----------------------------------------------------------------------------------------------------------------------
  
 /** /**
- * lets DokuWiki schedule the JavaScript call+ * lets dokuwiki schedule the javascript call
  */  */
 addInitEvent(function(){ fixRubyAlignment(); }); addInitEvent(function(){ fixRubyAlignment(); });
Line 278: Line 290:
  * Postprocesses the HTML that was built from that, to rubify kanji that have associated furigana.  * Postprocesses the HTML that was built from that, to rubify kanji that have associated furigana.
  */  */
- function register(&$controller) + function register(Doku_Event_Handler $controller) 
  {  {
  // initialise variables  // initialise variables
Line 324: Line 336:
 ?> ?>
 </file> </file>
-===== Discussion ===== 
- 
->Thank you thank you so much for this fantastic plugin! I searched for a DokuWiki "ruby" plugin thinking it would be so obscure a need I'd never find anything, but was delighted to find something that works EXACTLY like I need it to (in Internet Explorer 6.0 no less!). 
-> 
->I do have one question though, and it's regarding support in Chrome and possibly other browsers. These adhere to HTML5 standards for ruby tags, and therefore the ruby texts, as well as chunks of the page, don't display correctly. Would it be very complicated to add a conditional <ruby>Text<rt>テキスト</rt></ruby> HTML5 style tag in the case of browsers that don't support the XHTML standard? Once again, thanks for this awesome plug-in! --- //kououken 2010/02/19 16:08// 
- 
-Actually, the reason it malrenders in Chrome is because for a while now it's been using a version of webkit that messes up ruby code. If there is no stylesheet CSS rule for the ruby element, things looks fine, but if there is, good chance the ruby markup magically disappears (see [[http://pomax.nihongoresources.com/downloads/temp/chrome%20xhtml%20css%20bug/demonstrator.html|here]] for a demonstrator of this behaviour). This has been filed as bug for webkit, and has been patched, but Chrome has to date (being at public version 4.1.249.1064) not updated to include this webkit patch. 
- 
-I will update the javascript responsible for massaging the CSS based on browsers so that it actually disables the ruby rule when it sees Chrome. This seems to be the only actually useful fix at the moment. --- //Pomax 2010/05/01 00:15// 
plugin/xhtmlruby.1272666443.txt.gz · Last modified: 2010-05-01 00:27 by 86.89.151.209