Alignment of absolute child based on the baseline

Question

Alignment of absolute child based on the baseline

I am currently working on creating a comprehensive Unicode table that allows for the comparison of glyph spacing among different fonts.

The goal is to have a table where users can select various fonts, each with their own unique metrics. Given this variability in font characteristics, I am exploring whether it is feasible to align the child fonts with the baseline of the parent font after positioning the child glyph objects absolutely.

#table{
  display: flex;
        justify-content: center;
        align-items: center;
  font-size: 72pt;
  /* reference dimensions */
  border: 1px solid blue;
}

#table > div {
  display: inline-flex;
        justify-content: center;
  font-family: sans-serif;
  border: 1px solid #F0F;
}

#table > div > span {
  position: absolute;
  mix-blend-mode: difference;
  font-family: monospace;
  color: green;
  /* alignment reference */
  outline: 1px solid #0F0;
}

<div id="table">
  <div>x</div>
  <div>y</div>
  <div>z</div>
  <div>!</div>
</div>

My ideal solution would involve using solely CSS, although my research suggests this may not be achievable. Is there any way to access and manipulate font metrics through JavaScript, perhaps by calculating margins based on top or bottom values and passing them as CSS variables?

If an alternative approach is required, I may end up adjusting the relative position of child glyphs towards the start of the flex container by half their width plus half the width of the parent object. This could become cumbersome when dealing with thousands of glyphs and frequent font changes...

UPDATE: To provide context, the fonts "Arial" and "Times New Roman" are utilized as sans-serif and monospace respectively. The initial output is tested in Gecko/Firefox and later aligned with Chromium. While minor discrepancies between browsers may not usually pose a problem, these differences can impact specific layout aspects. For example, the default baselines in Word appear as shown below:

https://i.sstatic.net/Y8JwY.png

In "Times New Roman", the 'z' and '!' characters extend below the baseline, similar to the right side of 'x'.
The character 'y' actually extends above the baseline slightly.
All glyphs exhibit greater ascenders and descenders compared to their counterparts in "Arial".

javascript html css fonts

Answer 1

Answer №1

One way to achieve this effect is by wrapping each "letter" in its own div element. Then, you can set both the main span and the child span to have a position of absolute and align them at the bottom to ensure they share the same baseline.

To create some spacing between the letters, you can add a margin to the new divs. You can see an example of how this can be done below:

#box{
  display: inline-block;
        justify-content: center;
        align-items: center;
  font-size: 72pt;
  /* dimension ref */
  border: 1px solid blue; 
}

#box > div {
  position: relative;
  height: 100px;
  display: inline-block;
  margin: 30px;
}

#box > div > span {
  display: inline-flex;
        justify-content: center;
  font-family: serif;
  border: 1px solid #F0F;
  position: absolute;
  bottom: 0;
}

#box > div > span > span {
  position: absolute;
  mix-blend-mode: difference;
  font-family: cursive;
  color: red;
  /* alignment ref */
  outline: 1px solid #0F0;
  bottom:0;
}

<div id="box">
<div><span>x<span>x</span></span></div>
<div><span>y<span>y</span></span></div>
<div><span>z<span>z</span></span></div>
<div><span>!<span>!</span></span></div>
</div>

Answer 2

One way to achieve this effect is by wrapping each "letter" in its own div element. Then, you can set both the main span and the child span to have a position of absolute and align them at the bottom to ensure they share the same baseline.

To create some spacing between the letters, you can add a margin to the new divs. You can see an example of how this can be done below:

#box{
  display: inline-block;
        justify-content: center;
        align-items: center;
  font-size: 72pt;
  /* dimension ref */
  border: 1px solid blue; 
}

#box > div {
  position: relative;
  height: 100px;
  display: inline-block;
  margin: 30px;
}

#box > div > span {
  display: inline-flex;
        justify-content: center;
  font-family: serif;
  border: 1px solid #F0F;
  position: absolute;
  bottom: 0;
}

#box > div > span > span {
  position: absolute;
  mix-blend-mode: difference;
  font-family: cursive;
  color: red;
  /* alignment ref */
  outline: 1px solid #0F0;
  bottom:0;
}

<div id="box">
<div><span>x<span>x</span></span></div>
<div><span>y<span>y</span></span></div>
<div><span>z<span>z</span></span></div>
<div><span>!<span>!</span></span></div>
</div>

Answer 3

Answer №2

It seems I may have overlooked a simple solution: setting the letter-spacing to -1em for the parent glyph eliminates the need for absolute positioning of the child glyph while keeping the original inline baseline intact. There's no necessity for flex on the glyph parent either.

An added advantage is that now the outlines adhere to the specific font dimensions instead of being uniformed by flex and absolute positioning.

(It should be noted that mix-blend-mode is crucial to my goal, although it doesn't seem to work in the snippet console for text, only within the box model. Feel free to use your imagination or test it elsewhere. Highlighting the text in the snippet result will demonstrate the desired effect.)

div#box {
  font-size: 72pt;
  letter-spacing: -1em;
  /* box ref */
  outline: 1px solid #F0F;
}

#box > span {
  font-family: serif;
  /* dim ref */
  outline: 1px solid #000;
}

span > span {
  mix-blend-mode: difference;
  font-family: cursive;
  color: #0FF;
  letter-spacing: 0em;
  /* dim ref */
  outline: 1px solid #0FF;
}

<div id="box">
  <span>x<span>x</span></span>
  <span>y<sЛюT°jXÆ׏ɸۖКj@SPtzH6̳ئN5~ҰJ%
    ĮʺvȊǻ^ǩdԒMU*tCw)ߝ][!<span>!</span></span>

</div>

A rare instance where em behaves as expected rather than unexpectedly quirky.

Answer 4

It seems I may have overlooked a simple solution: setting the letter-spacing to -1em for the parent glyph eliminates the need for absolute positioning of the child glyph while keeping the original inline baseline intact. There's no necessity for flex on the glyph parent either.

An added advantage is that now the outlines adhere to the specific font dimensions instead of being uniformed by flex and absolute positioning.

(It should be noted that mix-blend-mode is crucial to my goal, although it doesn't seem to work in the snippet console for text, only within the box model. Feel free to use your imagination or test it elsewhere. Highlighting the text in the snippet result will demonstrate the desired effect.)

div#box {
  font-size: 72pt;
  letter-spacing: -1em;
  /* box ref */
  outline: 1px solid #F0F;
}

#box > span {
  font-family: serif;
  /* dim ref */
  outline: 1px solid #000;
}

span > span {
  mix-blend-mode: difference;
  font-family: cursive;
  color: #0FF;
  letter-spacing: 0em;
  /* dim ref */
  outline: 1px solid #0FF;
}

<div id="box">
  <span>x<span>x</span></span>
  <span>y<sЛюT°jXÆ׏ɸۖКj@SPtzH6̳ئN5~ҰJ%
    ĮʺvȊǻ^ǩdԒMU*tCw)ߝ][!<span>!</span></span>

</div>

A rare instance where em behaves as expected rather than unexpectedly quirky.

Answer 5

Answer №3

Adjust the box position to be relative and then manage the positioning of absolute children using px or %

#box{
    display: flex;
          justify-content: center;
          align-items: center;
    font-size: 72pt;
    /* dimension ref */
    border: 1px solid blue;
    position: relative;
  }
  
  #box > span {
    display: inline-flex;
          justify-content: center;
    font-family: serif;
    border: 1px solid #F0F;
  }
  
  #box > span > span {
    position: absolute;
    mix-blend-mode: difference;
    font-family: cursive;
    color: red;
    /* alignment ref */
    outline: 1px solid #0F0;
    bottom: 1%;
  }

 <div id="box">
    <span>x<span>x</span></span>
    <span>y<span>y</span></span>
    <span>z<span>z</span></span>
    <span>!<span>!</span></span>
  </div>

Place them on the side

#box{
    display: flex;
          justify-content: center;
          align-items: center;
    font-size: 72pt;
    /* dimension ref */
    border: 1px solid blue;
    position: relative;
  }

  #box > span {
    display: inline-flex;
          justify-content: center;
    font-family: serif;
    border: 1px solid #F0F;
    position: relative;
    width: 70px;
    margin-right: 50px;
  }

  #box > span > span {
    position: absolute;
    mix-blend-mode: difference;
    font-family: cursive;
    color: red;
    /* alignment ref */
    outline: 1px solid #0F0;
    bottom: -1%;
    left:  70px;
    width: 50px;

  }

 <div id="box">
    <span>x<span>x</span></span>
    <span>y<span>y</span></span>
    <span>z<span>z</span></span>
    <span>!<span>!</span></span>
  </div>

EDIT: in response to your comment:

in that case, it might be more effective to group letters in a single container, and then position both of them absolutely with baseline alignment. The example below illustrates this without additional positioning adjustments related to the font baseline. You can fine-tune the positioning using bottom

#box{
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 72pt;
  /* dimension ref */
  border: 1px solid blue;
  position: relative;
  height: fit-content;
  padding: 100px;
}

.black {
  position: absolute;
  display: flex;
  text-decoration: underline;
  
  justify-content: center;
  font-family: serif;
  border: 1px solid #F0F;
  letter-spacing: 30px;
}

.red {
  display: flex;
  text-decoration: underline;
  position: absolute;
  mix-blend-mode: difference;
  font-family: cursive;
  color: red;
  border: 1px solid lightgreen;
  letter-spacing: 30px;
 
}

<div id="box">

    <div class="black">XYZ!</div>
    <div class="red">XYZ!</div>
   
  </div>

Answer 6

Adjust the box position to be relative and then manage the positioning of absolute children using px or %

#box{
    display: flex;
          justify-content: center;
          align-items: center;
    font-size: 72pt;
    /* dimension ref */
    border: 1px solid blue;
    position: relative;
  }
  
  #box > span {
    display: inline-flex;
          justify-content: center;
    font-family: serif;
    border: 1px solid #F0F;
  }
  
  #box > span > span {
    position: absolute;
    mix-blend-mode: difference;
    font-family: cursive;
    color: red;
    /* alignment ref */
    outline: 1px solid #0F0;
    bottom: 1%;
  }

 <div id="box">
    <span>x<span>x</span></span>
    <span>y<span>y</span></span>
    <span>z<span>z</span></span>
    <span>!<span>!</span></span>
  </div>

Place them on the side

#box{
    display: flex;
          justify-content: center;
          align-items: center;
    font-size: 72pt;
    /* dimension ref */
    border: 1px solid blue;
    position: relative;
  }

  #box > span {
    display: inline-flex;
          justify-content: center;
    font-family: serif;
    border: 1px solid #F0F;
    position: relative;
    width: 70px;
    margin-right: 50px;
  }

  #box > span > span {
    position: absolute;
    mix-blend-mode: difference;
    font-family: cursive;
    color: red;
    /* alignment ref */
    outline: 1px solid #0F0;
    bottom: -1%;
    left:  70px;
    width: 50px;

  }

 <div id="box">
    <span>x<span>x</span></span>
    <span>y<span>y</span></span>
    <span>z<span>z</span></span>
    <span>!<span>!</span></span>
  </div>

EDIT: in response to your comment:

in that case, it might be more effective to group letters in a single container, and then position both of them absolutely with baseline alignment. The example below illustrates this without additional positioning adjustments related to the font baseline. You can fine-tune the positioning using bottom

#box{
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 72pt;
  /* dimension ref */
  border: 1px solid blue;
  position: relative;
  height: fit-content;
  padding: 100px;
}

.black {
  position: absolute;
  display: flex;
  text-decoration: underline;
  
  justify-content: center;
  font-family: serif;
  border: 1px solid #F0F;
  letter-spacing: 30px;
}

.red {
  display: flex;
  text-decoration: underline;
  position: absolute;
  mix-blend-mode: difference;
  font-family: cursive;
  color: red;
  border: 1px solid lightgreen;
  letter-spacing: 30px;
 
}

<div id="box">

    <div class="black">XYZ!</div>
    <div class="red">XYZ!</div>
   
  </div>

Alignment of absolute child based on the baseline

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery to transfer the selected value from one radio button to another

Finding the Xpath for an element that contains only a span tag, with identical attributes except for the text within

Downloading xml data in an Angular table is a straightforward process that can be achieved

Advanced Techniques: Leveraging Master Layouts, Partial Rendering, and JavaScript Function

The image source failed to load the image using the function

Organize the outcomes according to the date provided by the object's keys, and simply tally the number

Leveraging the power of CSS id selectors to customize the appearance of a Grid

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Incorporating a file from a specific directory in AngularJS

display a dual-column list using ngFor in Angular

Issues with Navigating through a Scrollable Menu

Create a regular expression to identify and substitute incorrect HTML properties

socket.io fails to transmit information

Using Vue.js, you can bind a JSON object as the value of a checkbox input to the

Instructions on exporting a CSV file from a JSON array with Node.js

Tips for getting rid of the ghosting effect or white background of a PNG image

"Encountering a RangeError with Node.js Sequelize while working with

Is there a way to apply a consistent border to both the input radio button and its corresponding label once the radio button has been selected

Tips for incorporating "are you sure you want to delete" into Reactjs

Determine the number of visible li elements using jQuery