[webkit-dev] Size Of Ruby Text?
Ryosuke Niwa
rniwa at webkit.org
Wed Nov 3 15:56:32 PDT 2010
With 7 & 8 pixels, it's almost impossible to differentiate さか & ざが.
Demo<http://plexode.com/eval3/#ht=10px%3A%20%3Cspan%20style%3D%22font-size%3A10px%3B%22%3Eさか%3C%2Fspan%3E%20%3Cspan%20style%3D%22font-size%3A10px%3B%22%3Eざが%3C%2Fspan%3E%3Cbr%3E%0A9px%3A%20%3Cspan%20style%3D%22font-size%3A9px%3B%22%3Eさか%3C%2Fspan%3E%20%3Cspan%20style%3D%22font-size%3A9px%3B%22%3Eざが%3C%2Fspan%3E%3Cbr%3E%0A8px%3A%20%3Cspan%20style%3D%22font-size%3A8px%3B%22%3Eさか%3C%2Fspan%3E%20%3Cspan%20style%3D%22font-size%3A8px%3B%22%3Eざが%3C%2Fspan%3E%3Cbr%3E%0A7px%3A%20%3Cspan%20style%3D%22font-size%3A7px%3B%22%3Eさか%3C%2Fspan%3E%20%3Cspan%20style%3D%22font-size%3A7px%3B%22%3Eざが%3C%2Fspan%3E%3Cbr%3E%0A&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1>.
Maybe we can try different fonts?
- Ryosuke
2010/11/3 Ryosuke Niwa <rniwa at webkit.org>
> 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/064d8353/attachment.html>
More information about the webkit-dev
mailing list