roberm
roberm

Reputation: 1

On mobile, the browser's text inflation isn't applied to the entire <ruby> HTML element

In this <ruby> element, I have:

<ruby><rb>会<rt>かい<rb>議<rt>ぎ</ruby>。

When there isn't enough text on the page to trigger the browser's text inflation algorithm, it outputs as it should, with all base text the same size: Image of output without inflation triggered

However, once there's enough text on the page to trigger text inflation, the font size change is ONLY applied to the first <rb> and <rt> elements in the <ruby> element: Image of output when inflation's triggered

To further illustrate that it's only subsequent <rb> and <rt> elements within that the browser isn't inflating: Image of longer output using below markup

<ruby><rb>今日<rt>きょう</ruby>の<ruby><rb>会<rt>かい<rb>議<rt>ぎ</ruby>。

I've tried disabling the browser's text inflation in the CSS with:

        body{
            text-size-adjust: none;
            -webkit-text-size-adjust:none;
        }

(I've tried for p and html as well, just in case, but no luck)

And I'm using this meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

But I've been unsuccessful in disabling the mobile browser's text inflation. I've tried different browsers, fiddling with the accessibility settings, no dice.

I've also tried forcing the ruby element to adjust with

        ruby, rb, rt{
            text-size-adjust:auto;
        }

But that didn't do anything either.

I've read that <rb> is depreciated, so tried various other markup options, such as these three:

<ruby>今日<rt>きょう</ruby>の<ruby>会<rt>かい</rt>議<rt>ぎ</ruby>。
<ruby>今日<rt>きょう</rt></ruby>の<ruby>会<rt>かい</rt>議<rt>ぎ</rt></ruby>。
<ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>の<ruby>会<rp>(</rp><rt>かい</rt><rp>)</rp>議<rp>(</rp><rt>ぎ</rt><rp>)</rp></ruby>。

but it's the same for all.

What DOES work is just...only using one set of <rb> and <rt> elements within a <ruby> element:

<ruby><rb>今日<rt>きょう</ruby>の<ruby><rb>会<rt>かい</ruby><ruby><rb>議<rt>ぎ</ruby>。

This fixes the problem, but it's a stupid way to do it. You shouldn't have to open and close a ruby element for each base character.

Any ideas are very welcome.

Upvotes: 0

Views: 34

Answers (0)

Related Questions