[webkit-dev] Size Of Ruby Text?
Ryosuke Niwa
rniwa at webkit.org
Wed Nov 3 15:49:47 PDT 2010
Yes that works. With anything below 9px, it's really hard to differentiate
濁音 (ばびぶべぼ) & 半濁音 (ぱぴぷぺぼ).
- Ryosuke
2010/11/3 Yasuo Kida <kida at apple.com>
> Does this work?
>
>
> http://plexode.com/eval3/#ht=%3Cdiv%20style%3D%22font-size%3A16px%3B%22%3E%0A16px-8px%3A%3Cruby%3E%3Crb%3E国%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eくに%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E象徴%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eしょうちょう%3C%2Frt%3E%3C%2Fruby%3E%3Cruby%3E%3Crb%3E鬼門%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eきもん%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E方角%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eほうがく%3C%2Frt%3E%3C%2Fruby%3Eを%3Cruby%3E%3Crb%3E凝視%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A8px%3B%22%3Eぎょうし%3C%2Frt%3E%3C%2Fruby%3Eする
> 。%3Cbr%3E%0A16px-9px%3A%3Cruby%3E%3Crb%3E国%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A9px%3B%22%3Eくに%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E象徴%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A9px%3B%22%3Eしょうちょう%3C%2Frt%3E%3C%2Fruby%3E%3Cruby%3E%3Crb%3E鬼門%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A9px%3B%22%3Eきもん%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E方角%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A9px%3B%22%3Eほうがく%3C%2Frt%3E%3C%2Fruby%3Eを%3Cruby%3E%3Crb%3E凝視%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A9px%3B%22%3Eぎょうし%3C%2Frt%3E%3C%2Fruby%3Eする。%3Cbr%3E%3Cbr%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20style%3D%22font-size%3A14px%3B%22%3E%0A14px-7px%3A%3Cruby%3E%3Crb%3E国%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A7px%3B%22%3Eくに%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E象徴%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A7px%3B%22%3Eしょうちょう%3C%2Frt%3E%3C%2Fruby%3E%3Cruby%3E%3Crb%3E鬼門%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A7px%3B%22%3Eきもん%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E方角%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A7px%3B%22%3Eほうがく%3C%2Frt%3E%3C%2Fruby%3Eを%3Cruby%3E%3Crb%3E凝視%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A7px%3B%22%3Eぎょうし%3C%2Frt%3E%3C%2Fruby%3Eする。%3Cbr%3E%0A14px-9px%3A%3Cruby%3E%3Crb%3E国%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eくに%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E象徴%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eしょうちょう%3C%2Frt%3E%3C%2Fruby%3E%3Cruby%3E%3Crb%3E鬼門%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eきもん%3C%2Frt%3E%3C%2Fruby%3Eの%3Cruby%3E%3Crb%3E方角%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3Eほうがく%3C%2Frt%3E%3C%2Fruby%3Eを%3Cruby%3E%3Crb%3E凝視%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A8px%3B%22%3Eぎょうし%3C%2Frt%3E%3C%2Fruby%3Eする。%3Cbr%3E%0A%3C%2Fdiv%3E%0A&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1
>
>
> According to "Choice of Size for Ruby Characters<http://www.w3.org/TR/2009/NOTE-jlreq-20090604/#en-subheading2_3_3>"
> in "Requirements for Japanese Text Layout":
>
> (note 2) When the size of base characters is very small (for e.g. smaller
> than seven points), ruby which is half the size, will be even more small and
> illegible. In such cases where the size of base characters is very small,
> ruby is not a suitable method of annotation. In those cases, consider other
> annotation methods such as adding the reading in parenthesis immediately
> after the base character.
>
>
> - kida
>
> On 2010/11/03, at 15:21, Ryosuke Niwa wrote:
>
> Hi Yasuko,
>
> Somehow your example isn't working. Could you copy & paste the HTML?
>
> - Ryosuke
>
> On Wed, Nov 3, 2010 at 3:11 PM, Yasuo Kida <kida at apple.com> wrote:
>
>> Thank you Ryosuke. This is a good demo. 5px is only barely legible and I
>> agree it is too small. 6px is legible but not fun to read. 7px looks
>> reasonable lower bound to me.
>>
>> 12pt text with 96dpi would translates to 16px, 50% ruby would be 8px.
>> 10.5pt which is often used by printed books is 14px, 50% ruby would be 7px.
>>
>> I do not think we should make the limit larger than 8px. The larger the
>> ruby size gets the more often you need to put extra gaps in the base text,
>> which makes the base text harder to read. See the <http://plexode.com/eval3/#ht=%3Cdiv%20style=%22font-size:16px;%22%3E%0A16px-8px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:8px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A16px-9px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:9px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%3Cbr%3E%0A%3C/div%3E%0A%0A%3Cdiv%20style=%22font-size:14px;%22%3E%0A14px-7px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:7px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A14px-8px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:8px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A%3C/div%3E%0A&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1>
>> e<http://plexode.com/eval3/#ht=%3Cdiv%20style=%22font-size:16px;%22%3E%0A16px-8px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:8px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A16px-9px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:9px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%3Cbr%3E%0A%3C/div%3E%0A%0A%3Cdiv%20style=%22font-size:14px;%22%3E%0A14px-7px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:7px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A14px-9px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:8px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A%3C/div%3E%0A&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1>
>> xample<http://plexode.com/eval3/#ht=%3Cdiv%20style=%22font-size:16px;%22%3E%0A16px-8px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:8px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A16px-9px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:9px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:9px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%3Cbr%3E%0A%3C/div%3E%0A%0A%3Cdiv%20style=%22font-size:14px;%22%3E%0A14px-7px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:7px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:7px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A14px-9px:%3Cruby%3E%3Crb%3E%E5%9B%BD%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8F%E3%81%AB%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E8%B1%A1%E5%BE%B4%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%97%E3%82%87%E3%81%86%E3%81%A1%E3%82%87%E3%81%86%3C/rt%3E%3C/ruby%3E%3Cruby%3E%3Crb%3E%E9%AC%BC%E9%96%80%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%8D%E3%82%82%E3%82%93%3C/rt%3E%3C/ruby%3E%E3%81%AE%3Cruby%3E%3Crb%3E%E6%96%B9%E8%A7%92%3C/rb%3E%3Crt%20style=%22font-size:8px;%22%3E%E3%81%BB%E3%81%86%E3%81%8C%E3%81%8F%3C/rt%3E%3C/ruby%3E%E3%82%92%3Cruby%3E%3Crb%3E%E5%87%9D%E8%A6%96%3C/rb%3E%3Crt%20%20style=%22font-size:8px;%22%3E%E3%81%8E%E3%82%87%E3%81%86%E3%81%97%3C/rt%3E%3C/ruby%3E%E3%81%99%E3%82%8B%E3%80%82%3Cbr%3E%0A%3C/div%3E%0A&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1>
>> .
>>
>> - kida
>>
>> On 2010/11/03, at 14:01, David Hyatt wrote:
>>
>> Yeah, that demo makes me think maybe 9px is fine after all. :)
>>
>> dave
>>
>> On Nov 3, 2010, at 3:56 PM, Ryosuke Niwa wrote:
>>
>> I think 5px is way too small. Maybe 7 or 8 at least but even those are
>> really hard to read in high-resolution displays. See demo<http://plexode.com/eval3/#ht=5px%3A%3Cruby%3E%3Crb%3E%E4%BB%8A%E6%97%A5%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A5px%3B%22%3E%E3%81%8D%E3%82%87%E3%81%86%3C%2Frt%3E%3C%2Fruby%3E%E3%81%AF%3Cruby%3E%3Crb%3E%E8%89%AF%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A5px%3B%22%3E%E3%82%88%3C%2Frt%3E%3C%2Fruby%3E%E3%81%84%3Cruby%3E%3Crb%3E%E5%A4%A9%E6%B0%97%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A5px%3B%22%3E%E3%81%A6%E3%82%93%E3%81%8D%3C%2Frt%3E%3C%2Fruby%3E%3Cbr%3E%0A6px%3A%3Cruby%3E%3Crb%3E%E4%BB%8A%E6%97%A5%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A6px%3B%22%3E%E3%81%8D%E3%82%87%E3%81%86%3C%2Frt%3E%3C%2Fruby%3E%E3%81%AF%3Cruby%3E%3Crb%3E%E8%89%AF%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A6px%3B%22%3E%E3%82%88%3C%2Frt%3E%3C%2Fruby%3E%E3%81%84%3Cruby%3E%3Crb%3E%E5%A4%A9%E6%B0%97%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A6px%3B%22%3E%E3%81%A6%E3%82%93%E3%81%8D%3C%2Frt%3E%3C%2Fruby%3E%3Cbr%3E%0A7px%3A%3Cruby%3E%3Crb%3E%E4%BB%8A%E6%97%A5%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A7px%3B%22%3E%E3%81%8D%E3%82%87%E3%81%86%3C%2Frt%3E%3C%2Fruby%3E%E3%81%AF%3Cruby%3E%3Crb%3E%E8%89%AF%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A7px%3B%22%3E%E3%82%88%3C%2Frt%3E%3C%2Fruby%3E%E3%81%84%3Cruby%3E%3Crb%3E%E5%A4%A9%E6%B0%97%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A7px%3B%22%3E%E3%81%A6%E3%82%93%E3%81%8D%3C%2Frt%3E%3C%2Fruby%3E%3Cbr%3E%0A8px%3A%3Cruby%3E%3Crb%3E%E4%BB%8A%E6%97%A5%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3E%E3%81%8D%E3%82%87%E3%81%86%3C%2Frt%3E%3C%2Fruby%3E%E3%81%AF%3Cruby%3E%3Crb%3E%E8%89%AF%3C%2Frb%3E%3Crt%20style%3D%22font-size%3A8px%3B%22%3E%E3%82%88%3C%2Frt%3E%3C%2Fruby%3E%E3%81%84%3Cruby%3E%3Crb%3E%E5%A4%A9%E6%B0%97%3C%2Frb%3E%3Crt%20%20style%3D%22font-size%3A8px%3B%22%3E%E3%81%A6%E3%82%93%E3%81%8D%3C%2Frt%3E%3C%2Fruby%3E%3Cbr%3E%3C%2Fdiv%3E&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1>
>> .
>>
>> - Ryosuke
>>
>> On Wed, Nov 3, 2010 at 12:47 PM, David Hyatt <hyatt at apple.com> wrote:
>>
>>> That document also states:
>>>
>>> "When the size of base characters is very small (for e.g. smaller than
>>> seven points), ruby which is half the size, will be even more small and
>>> illegible. In such cases where the size of base characters is very small,
>>> ruby is not a suitable method of annotation. In those cases, consider other
>>> annotation methods such as adding the reading in parenthesis immediately
>>> after the base character.
>>>
>>> It also sounds like we need to special case Ruby elements and allow their
>>> font sizes to go down to about 5px instead of 9px. Anything lower, and
>>> you're getting to the point where ruby was unsuitable (according to the text
>>> above) anyway, since the base text was so small.
>>>
>>> I filed:
>>>
>>> https://bugs.webkit.org/show_bug.cgi?id=48942
>>>
>>> dave
>>> (hyatt at apple.com)
>>>
>>> On Nov 3, 2010, at 2:29 PM, Yasuo Kida wrote:
>>>
>>> In printing the standard is 50% of the base text. For larger point sizes
>>> like headings, the size of ruby is often smaller than 50%.
>>>
>>> http://www.w3.org/TR/2009/NOTE-jlreq-20090604/#en-subheading2_3_3
>>>
>>> So, how about we default to 50% and see how they come out. Glyphs
>>> designed for ruby are optimized for those small point sizes. It is possible
>>> on some screen resolutions we might want to make it a bit bigger but as
>>> screen resolution gets higher I think it makes more sense to stick to 50%
>>> following the standard in printing.
>>>
>>> - kida
>>>
>>> On 2010/11/03, at 12:05, Eric Mader wrote:
>>>
>>>
>>> On Nov 3, 2010, at 8:56 AM, David Hyatt wrote:
>>>
>>> WebKit enforces a minimum font size of 9px when no explicit font size is
>>> specified. This means that the font for <rt> cannot fall below 9px if it is
>>> relative to the user agent default. It may be that we want to consider
>>> modifying this minimum for ruby text and allow it to go below 9px though.
>>> I'm not sure.
>>>
>>>
>>> Yes, that's probably what I'm seeing. I'm using default font size, which
>>> is probably 12pt.
>>>
>>> If you make a really big Ruby (e.g., <ruby style="font-size:96px"> and
>>> then modify the font-size percentage on the <rt>, you should be able to see
>>> it take effect.
>>>
>>> We should probably just study real-world Japanese examples to see how
>>> small Ruby typically is allowed to get. If it can go below 9px and still be
>>> readable, we should perhaps consider allowing that.
>>>
>>>
>>> I'm sure the detailed spec. addresses this issue. I'll review it.
>>>
>>> In terms of excluding Ruby text from the overall line height, I don't
>>> think the font-size of the <rt> is particularly relevant. You just want to
>>> hack the Ruby to turn the ruby text into overflow rather than having it be
>>> part of the overall height of the inline-block.
>>>
>>>
>>> Of course. The website I was using has the line height set too tight for
>>> correct display this way, and I just wanted to try a smaller size to see if
>>> it looked better. OTOH, that site loads a style sheet that overrides the
>>> ruby text font-size to 6pt, so I can't easily override it, and its' probably
>>> displaying as 9pt anyhow.
>>>
>>> dave
>>> (hyatt at apple.com)
>>>
>>>
>>> Regards,
>>> Eric
>>>
>>> On Nov 3, 2010, at 1:20 PM, Eric Mader wrote:
>>>
>>> Hi,
>>>
>>> As part of my work on ruby text enhancements, I'm implementing the option
>>> of not counting the height of the ruby text in the overall line height. As
>>> part of this, I wanted to play with changing the size of the ruby text. I'm
>>> trying to do this by changing the following lines in
>>> <WebKit>/WebCore/css/html.css:
>>>
>>> ruby > rt {
>>> display: block;
>>> font-size: 60%; /* make slightly larger than 50% for better
>>> readability */
>>> text-align: center;
>>> text-decoration: none;
>>> }
>>>
>>> However, when I change the font-size: attribute to, say, 50%, I don't see
>>> any difference in the size of the ruby text. (I even tried 25% just to be
>>> sure). Is this value being set somewhere else?
>>>
>>> Regards,
>>> Eric Mader
>>>
>>> _______________________________________________
>>> webkit-dev mailing list
>>> webkit-dev at lists.webkit.org
>>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>>>
>>>
>>>
>>> _______________________________________________
>>> webkit-dev mailing list
>>> webkit-dev at lists.webkit.org
>>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>>>
>>>
>>> _______________________________________________
>>> webkit-dev mailing list
>>> webkit-dev at lists.webkit.org
>>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>>>
>>>
>>>
>>> _______________________________________________
>>> webkit-dev mailing list
>>> webkit-dev at lists.webkit.org
>>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>>>
>>>
>>
>>
>>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20101103/4337e5a7/attachment-0001.html>
More information about the webkit-dev
mailing list