ruby_annotation_to_change_the.html 17.3 KB
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "/QA/2006/01/blogstyle.css";
    </style>
    <meta name="keywords" content='' />
    <meta name="description" content="(Updated on Friday 3 February 2006 to add valuable source of information given by Richard Ishida) In the concepts of microformats, there is a key concept which is design for humans first, machines second. We have often been faced to..." />
    <meta name="revision" content="$Id: ruby_annotation_to_change_the.html,v 1.114 2011/12/16 02:59:41 gerald Exp $" />    
   <link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
   <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />   
   <title>Ruby Annotation Under The Sunlight - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2006/01/quality_assurance_interest_gro.html" title="Quality Assurance Interest Group meets at the W3C Technical Plenary 2006" />
   <link rel="next" href="http://www.w3.org/QA/2006/02/buy_standards_compliant_web_si.html" title="Buy standards compliant Web sites" />

   <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
         xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
    rdf:about="http://www.w3.org/QA/2006/02/ruby_annotation_to_change_the.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/20"
    dc:title="Ruby Annotation Under The Sunlight"
    dc:identifier="http://www.w3.org/QA/2006/02/ruby_annotation_to_change_the.html"
    dc:subject="HTML"
    dc:description="(Updated on Friday 3 February 2006 to add valuable source of information given by Richard Ishida) In the concepts of microformats, there is a key concept which is design for humans first, machines second. We have often been faced to..."
    dc:creator="Karl Dubost"
    dc:date="2006-02-02T10:47:04+00:00" />
</rdf:RDF>
-->

    <!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->

</head>
<body class="layout-one-column">
      <div id="banner">
      <h1 id="title">
	<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
W3C Blog
</h1>
    </div>
    
    <ul class="navbar" id="menu">
        <li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
        <li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
        <li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
        <li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
    </ul>
<div id="searchbox">
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
</form>
</div>


    <div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->

                     <p class="content-nav">
                        <a href="http://www.w3.org/QA/2006/01/quality_assurance_interest_gro.html">&laquo; Quality Assurance Interest Group meets at the W3C Technical Plenary 2006</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2006/02/buy_standards_compliant_web_si.html">Buy standards compliant Web sites &raquo;</a>
                     </p>

                        <h2 class="entry-header">Ruby Annotation Under The Sunlight</h2>
                           <div class="entry-body">
                              <p>(Updated on Friday 3 February 2006 to add valuable source of information given by <cite><a href="http://www.w3.org/People/Ishida/">Richard Ishida</a></cite>)</p>

<p>In the concepts of <a href="http://microformats.org/">microformats</a>, there is a key concept which is <q cite="http://microformats.org/about/">design for humans first, machines second</q>. We have often been faced to the problem of giving a date that will be easy to read by human and will be easy to  parse by a computer. Or maybe you would like to give the price of a product with values in two currencies? Or you would like to give the translation of a term in another language?  How would you be able to do that in <a href="http://www.w3.org/TR/xhtml11/">XHTML</a>? Is there a <strong>simple way</strong> of associating different types of information with a simple semantic relationship.</p>

<p>There is a language for these applications which has been created in 2001 at W3C: <a href="http://www.w3.org/TR/ruby/">Ruby Annotation.</a></p>
                           </div>
                           <div id="more" class="entry-more">
                              <h3 id="about">About Ruby?</h3>

<p>Ruby on the Web these days is known to be a <a href="http://www.ruby-lang.org/" title="Web site of Ruby programming language">programming language</a>, a <a href="http://www.intertwingly.net/blog/" title="Weblog of Sam Ruby">programmer working for IBM</a> and I guess for most people, everywhere in the world, a <a href="http://en.wikipedia.org/wiki/Ruby" title="definition of the Ruby gemstone">red gemstone</a>. In the context of W3C, <a href="http://www.w3.org/TR/ruby/">Ruby</a> is a simple markup language which offers the possibility of creating inline annotations, as described in the <a href="http://www.w3.org/TR/2001/REC-ruby-20010531/#what">Ruby specification</a></p>

<blockquote cite="http://www.w3.org/TR/2001/REC-ruby-20010531/#what">
<p>Ruby is the term used for a run of text that is associated with another run of text, referred to as the base text. Ruby text is used to provide a short annotation of the associated base text. It is most often used to provide a reading (pronunciation guide). Ruby annotations are used frequently in Japan in many kinds of publications, including books and magazines. Ruby is also used in China, especially in schoolbooks.</p>

<p>Ruby text is usually presented alongside the base text, using a smaller typeface. The name "ruby" in fact originated from the name of the 5.5pt font size in British printing, which is about half the 10pt font size commonly used for normal text.</p>
</blockquote>

<p>You will find a lot of answers to your questions in the <a href="http://www.w3.org/International/questions/qa-ruby">FAQ about Ruby</a>.</p>

<h3 id="use-cases">Use Cases for Ruby Annotation</h3>

<p>We asked <a href="http://www.w3.org/People/fsasaki/">Felix Sasaki</a>, working in the W3C <a href="http://www.w3.org/International/">Internationalization Activity</a> to give us a set of use cases for Ruby Annotation. These examples are viewable with Firefox and this <a href="http://piro.sakura.ne.jp/xul/_rubysupport.html.en">XPI extension for Ruby</a>.</p>

<h4 id="date">Date</h4>

<p>You might want to represent a date and give information about the different parts of the date on a package to be sure that no mistakes will be made.</p>

<ul>
	<li>Ruby base: Thursday 2 2 2006</li>
	<li>Explanations: This is an expiration date with the following sequence: a day name, the day, the month and the year.</li>
</ul>

<p><a href="/QA/2006/02/ruby-examples.xhtml#date">See example</a></p>

<h4 id="japanese">Japanese use</h4>

<p>In Japan, when you learn the language, you may need to give the sound equivalent of the words in a specific scripting system, so readers will be able to pronounce it.</p>

<ul>
	<li>Base text: "日本"</li>
	<li>Ruby as pronounciation description with Hiragana  "にほん", Katakana "ニホン" or Romaji "nihon"</li>
</ul>
<p>How to write it?</p>
<pre>
&lt;p&gt;&lt;ruby&gt;
  &lt;rb&gt;&#26085;&#26412;&lt;/rb&gt;
  &lt;rt&gt;nihon&lt;/rt&gt;
&lt;/ruby&gt;&lt;/p&gt;
</pre>
<p><a href="/QA/2006/02/ruby-examples.xhtml#japanese">See example for the rendering.</a></p>


<h4 id="chinese">Chinese use</h4>

<p>In a similar way for chinese language.</p>
<ul>
	<li>Base text: 好</li>
	<li>Ruby as pronunciation description with pin-yin "hao"</li>
</ul>

<p><a href="/QA/2006/02/ruby-examples.xhtml#chinese">See example</a></p>

<h4 id="glossing">Linguistic morphological glossing</h4>
<p>You might want to explain in a sentence which part is a noun and which part is a verb. For example, at school, when you teach grammar to children.</p>


<ul>
	<li>Base text: "I like fish"</li>
	<li>Ruby as morphological glossing: Noun (for "I") Verb (for "like") Noun (for "fish")</li>
</ul>

<p><a href="/QA/2006/02/ruby-examples.xhtml#glossing">See example</a></p>

<h4 id="invisible">Expression of "invisible" units in a text</h4>

<p>The base text contains a Japanese sentence "Yesterday I went to Shibuya". The pronoun "I" is usually omitted in the original, which makes it hard to understand for e.g. beginning Japanese language learners.</p>

<p>The ruby text above the base text explains what is omitted. The first ruby text line below the base text contains a romanized vesion. The second ruby text line below the base text contains morpho-lexical information. The abbreviations: "TM" means "topic marker", "DM" means "direction marker".</p>

<p><a href="/QA/2006/02/ruby-examples.xhtml#invisible">See example</a></p>

<h4 id="gesture">Adding information about gestures to conversation transcriptions</h4>

<ul>
	<li>Base text: "And we bought a biiiig icecream."</li>
	<li>Ruby can be used to mark up "biiig" and to add information about gestures. It could be for example an image of someone making the gesture and big eyes.</li>
</ul>

<h4 id="word-boundaries">Expressing non-segmentable word boundaries</h4>

<p>
This is useful for</p>
<ul>
	<li>a contraction (Old High German, English, many other languages)</li>
	<li>a compound word (Sanskrit, Avestan, many other languages)</li>
	<li>a group of words whose forms have been affected by "euphonic" sandhi changes (Sanskrit, Breton)</li>
	<li>a group of words in which, for orthographic or other reasons, the word junctions are not indicated (Sanskrit, Japanese)</li>
</ul>

<p>An example from Japanese:</p>

<ul>
	<li>base text: yo-mu (means: "reading in the base form"; with the Japanese syllabic script, the boundaries between the morphemes "yom" and "m" cannot be expressed)</li>
	<li>Ruby for a segmentation of morphological boundaries: contains a romanized version of "yomu" with the correct boundaries "yom-mu".</li>
</ul>

<h3 id="implementations">Implementations: Sunny side-up?</h3>

<p>Well not really for now. <cite><a href="http://annevankesteren.nl/">Anne Van Kesteren</a></cite> (Opera) in a recent post <cite><a href="http://annevankesteren.nl/2006/01/ruby">Ruby in HTML</a></cite> has looked at the implementation of Ruby in Internet Explorer.</p>
<blockquote cite="http://annevankesteren.nl/2006/01/ruby">
<p>Using the Live DOM Viewer I tried to figure out more or less how it works. Not everything is covered, but the basic parsing rules are here; simple research.</p>
</blockquote>

<p>We have not found an implementation report of Ruby in different browsers, user agents and in authoring tools (the too often forgotten ones). If someone could create an implementation report using the <a href="http://www.w3.org/People/mimasa/test/ruby/">Ruby Annotation Test Cases</a> developed by <cite><a href="http://www.w3.org/People/mimasa/" title="home page of ISHIKAWA, Masayasu">石川雅康</a></cite> and also the <a href="http://www.w3.org/International/tests/#ruby">Ruby Test Cases</a> developed by Internationalization Activity, it would help to have a good picture of the implementation landscape. Simple Ruby annotations are <a href="http://www.w3.org/QA/2006/02/amaya-ruby-implementation" title="screenshot of ruby rendered in amaya browser/editor">implemented in Amaya</a>. There is also an <a href="http://piro.sakura.ne.jp/xul/_rubysupport.html.en">xpi extension for Ruby</a> which is available for Firefox and Mozilla and help to <a href="http://www.w3.org/QA/2006/02/ruby-annotation-firefox" title="screenshot of ruby rendered in firefox 1.5">visualize simple and complex ruby</a> annotation. Unfortunately it's not a native implementation in Mozilla rendering engine, which has still an <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=33339">open issue for Ruby markup</a>.</p>

<p>On the styling side, the CSS Working Group is working on a module called <cite><a href="http://www.w3.org/TR/css3-ruby/">CSS 3 Module for Ruby</a></cite> and <cite><a href="http://www.akatsukinishisu.net/itazuragaki/" title="kitamura home page">北村暁</a></cite> has published a way to style <a href="http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3">ruby with CSS in Mozilla</a>.</p>

<p>So we are not there yet, but I would say that almost all the information is available for helping developers to implement in their products but there are real benefits using ruby in a page. For example, we found this page giving a table which contains the <a href="http://www.i18nguy.com/unicode/unicode-example-ruby.html">birthplaces and native names of celebrities</a> (actors, singers, sports figures, etc.) in different languages. (to see with Firefox and the XPI extension).</p>

<p>Any comments or additional information are welcome, specifically from the internationalization specialists… ;)</p>

<h3 id="information">More information / Reminder</h3>

<ul>
       <li><a href="http://www.w3.org/International/questions/qa-ruby">FAQ: What is Ruby?</a></li>
       <li><a href="http://www.w3.org/International/tutorials/ruby/">Tutorial: Ruby Markup and Styling</a></li>
       <li><a href="http://www.w3.org/International/tests/#ruby">Test Materials for Ruby</a></li>
	<li><a href="http://en.wikipedia.org/wiki/Ruby_characters">Ruby at Wikipedia</a></li>
	<li><a href="http://www.w3.org/2003/03/Translations/OverviewRecs.html#ruby">Translations of Ruby Specification in different languages</a></li>
	<li><a href="http://www.w3.org/QA/2006/02/ruby-annotation-firefox">Screenshot of ruby rendered in Firefox 1.5</a></li>
	<li><a href="http://www.w3.org/QA/2006/02/amaya-ruby-implementation">Screenshot of ruby rendered in Amaya</a></li>
        <li><a href="http://piro.sakura.ne.jp/xul/_rubysupport.html.en">XPI extension to have a rendering of ruby in Mozilla and Firefox</a></li>
        <li><a href="http://www.w3.org/Amaya/User/BinDist.html">To download Amaya</a> which helps to visualize simple Ruby</li>
</ul>
                           </div>
                       <p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on February  2, 2006 10:47 AM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/technology_101/">Technology 101</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2006/02/ruby_annotation_to_change_the.html">Permalink</a>
                                 
                                 | <a href="http://www.w3.org/QA/2006/02/ruby_annotation_to_change_the.html#trackback">TrackBacks (0)</a>
</p>






<p id="gentime">This page was last generated on $Date: 2011/12/16 02:59:41 $</p> 

      </div><!-- End of "main" DIV. -->

<address>

This blog is written by W3C staff and working group participants,<br />
&nbsp;and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
    </address>


    
    <p class="copyright">
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2011
      <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
      (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
      <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
      <a href="http://www.keio.ac.jp/">Keio</a>),
      All Rights Reserved.
      W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
      <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
      and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
      rules apply. Your interactions with this site are in accordance
      with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
      <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
      statements.
    </p>

  </body>
</html>