Bold letter on ruby element moves everything above this letter

Question

I found a great solution to adjust the vertical position of ruby text on this post:

But when I try to put one letter bold inside ruby element everything go above the bold letter, Is there a solution for this?

ruby {
  display: inline-flex;
  flex-direction: column-reverse;
  text-align: center;
}

rt {
  display: inline;
  line-height: 1;
}

わたしの　<ruby><strong>会</strong>社<rt>かいしゃ</rt></ruby>です。

To be honest, I don't see the problem? I'm using Firefox right now. — Maik Lowrey, Mar 08 '22 at 13:04
I just check it and is not Ok on Firefox as well, what I want is this Kanji bold 会 and next to it this other Kanji 社 and over both of them the Hiragana かいしゃ, in all cases (Chorem or Firefox) what I see is this bold 会, over this one, the other Kanji 社 and over the last one the Hiragana lecture... — Javier Lopez, Mar 09 '22 at 13:32

score 0 · Accepted Answer · edited Mar 12 '22 at 02:04

0

Solved

body {
  font-size: 28px;
}

ruby {
  font-family: 'Yu Gothic Bold';
}

rt {
  display: flex;
  flex-direction: column-reverse;
  line-height: 80%;
}

<p>Hola　<ruby><rt>かいしゃかきくけこ</rt><strong>会</strong>社 
</ruby></p>

edited Mar 12 '22 at 02:04

Henry Ecker

answered Mar 12 '22 at 01:42

Javier Lopez

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 12 '22 at 03:28

1 Answers1