CSS for aligning to baseline grid

Question

CSS for aligning to baseline grid

Update: I am seeking advice on how to align text to a baseline using different font sizes within a div. Despite my efforts, I have not found a satisfactory solution online. It seems impossible to achieve without the use of a Javascript framework or css preprocessor. This is perplexing considering the known proportion of the font below the baseline.

In the provided code snippet below, changing the font size of .text2 to 22px causes the two text groups to no longer align at the baseline (the bottom of the 'h'). However, reverting it back to 32 px results in proper alignment. Since both fonts are in Arial and the descenders of the 'j' should be proportionate, any insights into why they do not align?

View the code here

CSS:

.bottomalign
{
  position: absolute;
  float: left;
  bottom: -.24em;
}

.container
{
  position: relative;
  height: 50px;
  overflow: visible;
}

div
{
  font-family: arial;
}

.text1
{
  font-size: 16px;
}

.text2
{
  font-size: 32px;
  margin-left: 2px;
  color: green;
}

HTML:

 <div class="container">

      <div class="bottomalign text1">jh</div>
      <div class="bottomalign text2">jh</div>

 </div>

javascript html css

Answer 1

Answer №1

If you're looking to ensure that your divs align properly regardless of size, my recommendation would be to set them with

display: inline-block; vertical-align: baseline;

. This will help maintain the alignment you desire. Check out this link for more details: http://codepen.io/pageaffairs/pen/ucyIt

Alternatively, consider this second option mentioned in the note: http://codepen.io/pageaffairs/pen/jBcxk

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>

body {
    font-family: arial;
}

.container div {
    display: inline-block;
    vertical-align: baseline;
}

.text1 {
    font-size: 16px;
}

.text2 {
    font-size: 32px;
    color: green;
    margin-left: 2px;
}

</style>
</head>
<body>

<div class="container">
    <div class="text1">jh</div>
    <div class="text2">JH</div>
</div>

</body>
</html>

Answer 2

If you're looking to ensure that your divs align properly regardless of size, my recommendation would be to set them with

display: inline-block; vertical-align: baseline;

. This will help maintain the alignment you desire. Check out this link for more details: http://codepen.io/pageaffairs/pen/ucyIt

Alternatively, consider this second option mentioned in the note: http://codepen.io/pageaffairs/pen/jBcxk

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>

body {
    font-family: arial;
}

.container div {
    display: inline-block;
    vertical-align: baseline;
}

.text1 {
    font-size: 16px;
}

.text2 {
    font-size: 32px;
    color: green;
    margin-left: 2px;
}

</style>
</head>
<body>

<div class="container">
    <div class="text1">jh</div>
    <div class="text2">JH</div>
</div>

</body>
</html>

Answer 3

Answer №2

The variation in default line-height across browsers is the main reason for the discrepancy: Mozilla typically uses a value around 1.2. To address this issue, the code snippet above required a reset for the line height:

.bottomalign
{
  position: absolute;
  bottom: -.17em; //arial descends 17% below baseline
  line-height: 1;
}

Reference the following link for more information:

Answer 4

The variation in default line-height across browsers is the main reason for the discrepancy: Mozilla typically uses a value around 1.2. To address this issue, the code snippet above required a reset for the line height:

.bottomalign
{
  position: absolute;
  bottom: -.17em; //arial descends 17% below baseline
  line-height: 1;
}

Reference the following link for more information:

Answer 5

Answer №3

If you're seeking a solution that involves dynamic adjustments using JavaScript rather than just CSS, the following code snippet should help:

To make the necessary changes, simply delete the "bottom: -.24em;" declaration from the bottomalign class and insert the provided script tag:

Snippet to be added:

<html>
<head>
<style>
.bottomalign
{
  position: absolute;
  float: left;

}

.container
{
  position: relative;
  height: 50px;
  overflow: visible;
}

div
{
  font-family: arial;
}

.text1
{
  font-size: 16px;
}

.text2
{
  font-size: 32px;
  margin-left: 2px;
  color: green;
}
</style>
</head>
<body>
<div class="container">

      <div class="bottomalign text1">jh</div>
      <div class="bottomalign text2">jh</div>
    <script language="javascript"> document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")

[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px'; </script>
 </div>
</body>
</html>

Answer 6

If you're seeking a solution that involves dynamic adjustments using JavaScript rather than just CSS, the following code snippet should help:

To make the necessary changes, simply delete the "bottom: -.24em;" declaration from the bottomalign class and insert the provided script tag:

Snippet to be added:

<html>
<head>
<style>
.bottomalign
{
  position: absolute;
  float: left;

}

.container
{
  position: relative;
  height: 50px;
  overflow: visible;
}

div
{
  font-family: arial;
}

.text1
{
  font-size: 16px;
}

.text2
{
  font-size: 32px;
  margin-left: 2px;
  color: green;
}
</style>
</head>
<body>
<div class="container">

      <div class="bottomalign text1">jh</div>
      <div class="bottomalign text2">jh</div>
    <script language="javascript"> document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")

[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px'; </script>
 </div>
</body>
</html>

Answer 7

Answer №4

After exploring different options, I have come up with a solution that may align with what you are seeking.

TL:DR; You can check out the code snippet here

To achieve this, I utilized the CSS property display: table-cell;. Below is the CSS I implemented based on your HTML structure:

.bottomalign {
    display: table-cell;
}
.container {
    position: relative;
    height: 50px;
    overflow: visible;
    display: table;
}
div {
    font-family: arial;
}
.text1 {
    font-size: 16px;
}
.text2 {
    font-size: 32px;
    color: green;
}

The container was given a display: table;, while the bottomalign had a display: table-cell;.

Please review and let me know if this meets your requirements.

Answer 8

After exploring different options, I have come up with a solution that may align with what you are seeking.

TL:DR; You can check out the code snippet here

To achieve this, I utilized the CSS property display: table-cell;. Below is the CSS I implemented based on your HTML structure:

.bottomalign {
    display: table-cell;
}
.container {
    position: relative;
    height: 50px;
    overflow: visible;
    display: table;
}
div {
    font-family: arial;
}
.text1 {
    font-size: 16px;
}
.text2 {
    font-size: 32px;
    color: green;
}

The container was given a display: table;, while the bottomalign had a display: table-cell;.

Please review and let me know if this meets your requirements.

Answer 9

Answer №5

Implementing this is now possible by utilizing display: flex along with align-self: flex-end:

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 24em;
}

.bottom-align {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    -ms-align-self: flex-end;
    -o-align-self: flex-end;
    align-self: flex-end;
}

.text-1 {
    font-size: 1em;
}

.text-2 {
    font-size: 2em;
}

I have made enhancements to your initial approach, view it here.

Please bear in mind that the flexbox specification is continuously evolving, requiring the inclusion of prefixes presently, unless a tool such as autoprefixer is employed.

Answer 10

Implementing this is now possible by utilizing display: flex along with align-self: flex-end:

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 24em;
}

.bottom-align {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    -ms-align-self: flex-end;
    -o-align-self: flex-end;
    align-self: flex-end;
}

.text-1 {
    font-size: 1em;
}

.text-2 {
    font-size: 2em;
}

I have made enhancements to your initial approach, view it here.

Please bear in mind that the flexbox specification is continuously evolving, requiring the inclusion of prefixes presently, unless a tool such as autoprefixer is employed.

CSS for aligning to baseline grid

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Best method to generate an element using any jQuery selector string

HTML5 Applications with Intel XDK

Utilizing AngularJS to display an array of user inputs

Change the structure of the content in a div

How do I ensure that my font size completely fills the space in a justified layout using CSS?

What is the best way to contact all products that have been made by a specific User?

Capturing the clicked element within a Vue (JS) instance by utilizing $(this) can be achieved by following these

Steps for embedding a webpage within a div element

The data input from the HTML is not being correctly transferred to the modal

Trigger a function following a collection update in Angular Meteor

A guide to troubleshoot and resolve the 500 (Internal Server Error) encountered during an Ajax post request in Laravel

Ways to ensure a div remains at the bottom of a page without using a wrapper

Should I use a single CSS file or separate CSS files for each page?

What is the best way to reference an Angular constant within a Gulp configuration file?

Press on a specific div to automatically close another div nearby

Error: Attempting to access the 'createClient' property of an undefined object - TypeError

In Internet Explorer 8, the PNG image is visible but in IE7, it myster

Asynchronous update of array elements - lack of firing watch events

Find out the dimension of an object's width

Exploring the power of D3's nested appends and intricate data flow