Question 236073 in Html Question posted in
Some basic documentation can be found here.

Html – How can I vertically align <ruby> element with regular text

Is there a way to vertically align <ruby> element with the bottom of regular text ?

Here are my css & code:

body {
  font-family:"Times New Roman";
  }
ruby {
  font-family:"Times New Roman";
    display: inline-flex;
    flex-direction: column-reverse ;
    align-items: center;
  }
rt {
  font-family:"Arial Narrow";
  }

Mat 1:1 <RUBY><ruby><ruby>Βίβλος<rt>βίβλος</rt></ruby><rt>[The] book</rt></ruby><rt>N-NSF</rt></RUBY> <RUBY><ruby><ruby>γενέσεως<rt>γένεσις</rt></ruby><rt>of [the] genealogy</rt></ruby><rt>N-GSF</rt></RUBY> <RUBY><ruby><ruby>Ἰησοῦ<rt>Ἰησοῦς</rt></ruby><rt>of Jesus</rt></ruby><rt>N-GSM</rt></RUBY> <RUBY><ruby><ruby>Χριστοῦ<rt>Χριστός</rt></ruby><rt>Christ</rt></ruby><rt>N-GSM</rt></RUBY>

The result:
not-wkring

p.s. I’ve tried display: inline-block, but then the vertical order of <ruby> element is out-of place.not working2

p.p.s. display: inline-flex; flex-direction: column ; not working as well, see not working3

Tags:

2

Answers


  1. 0 
    To vertically align the <ruby> elements with the bottom of regular text, you can use a combination of CSS properties to control their display and alignment. It's important to note that vertical alignment in CSS can sometimes be a bit tricky due to variations in browser rendering, so you might need to adjust these styles to suit your specific needs.

Based on your provided code, here's an example of how you could modify the CSS to achieve the desired vertical alignment:

body {
  font-family: "Times New Roman";
}

ruby {
  font-family: "Times New Roman";
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

rt {
  font-family: "Arial Narrow";
  align-self: flex-end; /* Align the <rt> element to the bottom of <ruby> */
}


Here's how your provided HTML would look with the updated CSS:

<p>
  <ruby>
    <ruby>Βίβλος<rt>βίβλος</rt></ruby><rt>[The] book</rt>
  </ruby>
  <ruby>
    <ruby>γενέσεως<rt>γένεσις</rt></ruby><rt>of [the] genealogy</rt>
  </ruby>
  <ruby>
    <ruby>Ἰησοῦ<rt>Ἰησοῦς</rt></ruby><rt>of Jesus</rt>
  </ruby>
  <ruby>
    <ruby>Χριστοῦ<rt>Χριστός</rt></ruby><rt>Christ</rt>
  </ruby>
</p>
    Login or Signup to reply.
  2. 0 
    body {
  font-family: "Times New Roman";
}

.interlinear {
  display: flex;
  align-items: flex-end;
  font-family: "Times New Roman";
}

.ruby {
  display: inline-block;
  position: relative;
}

.rt {
  display: block;
  font-family: "Arial Narrow";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}




<div class="interlinear">
  <div class="ruby">Mat 1:1</div>
  <ruby>
    Βίβλος<rt>βίβλος</rt>
  </ruby>
  <!-- Add more <ruby> elements here as needed -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search