How to place text on the baseline?

Question

PLAYGROUND HERE

HTML:

<div class="first">Hello g World</div> <div class="second">Hello g World</div> 

CSS

 div { background-color: rgba(255, 0, 0, 0.3); /* For visualization only */ margin-top: 50px; /* For visualization only */ height: 20px; /* This is fixed! */ } .first { font-size: 16px; /* This can change */ } .second { font-size: 30px; /* This can change */ } 

Result:

How would you place the text so that its baseline (the bottom of the "Hello") is aligned with the bottom of the pink rectangle, that is:

Is there any way to achieve this regardless of font-size ?

PLAYGROUND HERE

Answer 1

After searching ... and searching, I came up with this very amazing tutorial in adobe place on how to align text to the baseline element.

USE PSEUDO-ELEMENT

I would suggest this one, but take a look at the whole story (Road from the .strut element to one pseudo-element):

 div { width: 400px; height: 100px; } .first { font-size: 24px; background-color: #9BBCE3; } .first::after { content: ""; height: 100%; display: inline-block; } 

 <div> <div class="first">Hello g World / With font-size: 24px</div> </div> 

USING AN EXTRA ITEM

• SCENARIOS AND RULES

Rule 1 (Large Fonts) . We want the height of the div to be fixed. For example, 20px. Thus, the font-size must be equal to or less than the .height value in order to work. Generally,

~ FUNCTIONAL SIZE SHOULD BE EQUAL OR LESS THAN THE INSTALLED HEIGHT. THIS WORKS FOR ALL SIZES WITH LESS VALUES

Scenario 1 . Suppose we have larger fonts than 20px this case.

Take a look in action: http://jsfiddle.net/csdtesting/pvw5xhku/

 div.forall { width: 700px; height: 48px; border: thin black solid; background-color: #9BBCE3; margin-top: 20px; } .inText { font-size: 48px; line-height: 48px; } .inText3 { font-size: 22px; line-height: 22px; } .strut { height: 48px; display: inline-block; } 

 <div class="forall"> <div class="inText">Hello g World /With font-size 46px <div class="strut"></div> </div> </div> <div class="forall"> <div class="inText2">Hello g World /With font-size 32px <div class="strut"></div> </div> </div> <div class="forall"> <div class="inText3">Hello g World /With font-size 32px <div class="strut"></div> </div> </div> 

• EXPLANATION

All the magic about this implementation is related to the .strut element . This is the one who has the display:inline-block; property display:inline-block; ! I wondered ... what is it again ?!

The base line of the rack is located at its edge of the lower edge, which is determined in this case only by the height of the rack. And if the length of the letter string is less than the height of the rack, the baseline of the letters will move accordingly! Unbelievable!

• PRIMARY IMPLEMENTATION

Take a look in action: http://jsfiddle.net/csdtesting/bm2yz3ec/

 div.forall { width: 300px; height: 20px; border: thin black solid; background-color: #9BBCE3; margin: 10px; } .inText { font-size: 20px; line-height: 20px; } .intext2 { font-size: 9px; line-height: 9px; } .strut { height: 20px; display: inline-block; } 

 <div class="forall"> <div class="inText">Hello g World /With font-size 20px <div class="strut"></div> </div> </div> <div class="forall"> <div>Hello g World / Without font-size <div class="strut"></div> </div> </div> <div class="forall"> <div class="intext2">Hello g World / with font-size:9px <div class="strut"></div> </div> </div> 

Answer 2

Yes, to some extent: you can manipulate the position of the text using a combination of line-height and selecting other properties, including setting margins and indents, or using position: relative and top . There are other methods if you only have one line that needs positioning (for example, if you create a cap); I will talk about positioning methods that work on one or several lines.

There is quite a bit of caution about this, that type visualization depends on the OS and browsers, and it will be difficult to precisely control the text, especially if you want the pixel mode to be perfect.

By default, browsers place text in the middle of the line, as determined by the height of the line. There is no defined baseline for text that is invariant between browsers, so the location is browser dependent.

The idea when adjusting the vertical rhythm is for all your texts to fall at regular intervals. To do this, you need to control the font size (which most people do anyway), the height of the line and everything that adds vertical space to your design: borders, margins and margins. You select your "rhythm block" - in your case, 20px - and then set the text to align with it. The height of your line should be equal to your rhythmic unit (i.e. 20px); for large font sizes, use multiple units of rhythm (for example, 40 pixels, 60 pixels) to keep the text in rhythm. The combination of borders, padding and margins should complement your rhythm section to keep everything in order.

I did the following JS Fiddle to illustrate the following code snippet.

As mentioned earlier, text becomes a vertically-centered (-ish) browser, so it doesn't sit nicely on the grid; The text baseline moves when using different font sizes. Here are some ways to handle this.

Here is our HTML example:

 <article> <section> <h2>Title!</h2> <div class="first">Hello g World<br />Lorem ipsum...</div> <div class="second">Hello g World<br />Lorem ipsum...</div> <div class="first">Hello g World<br />Lorem ipsum...</div> </section> </article> 

We will give it the following basic css:

 article { margin: 0; padding: 0; line-height: 20px; /* 20px is our "unit of rhythm" */ } div { margin: 20px; } h2 { font-size: 24px; line-height: 40px; /* double our rhythm unit */ } .first { font-size: 16px; } .second { font-size: 30px; line-height: 40px; /* double our rhythm unit */ } 

Using position: relative and top :

Visually align the text by positioning it relative to the background grid.

Give the section element a rel class and add the following CSS:

 .rel, .rel .first, .rel .second { position: relative; } .rel .first { top: 4px; } .rel .second { top: 9px; } 

JS Fiddle - Halfway Down the Page

This pushes the text away from its natural position. Unfortunately, this alignment must be done by the eye and yes, it depends on the browser and browser. Pages are usually internally consistent - i.e. text strings with a grid, even if they are evenly several pixels higher in some browsers.

Using padding and / or margin

The sum of the top and bottom fill should equal our rhythm unit. Again, alignment should be performed by eye and may vary between browsers.

 .ptop .first { padding-top: 24px; padding-bottom: 16px; margin: 0 20px; /* get rid of the massive gap! */ } .ptop .second { padding-top: 30px; padding-bottom: 10px; margin: 0 20px; /* get rid of the massive gap! */ } 

JS Fiddle - Scroll Down

You can also use fields, but care must be taken when dropping fields to ensure that the rhythm remains unchanged.

This guide is for introducing several ways to establish vertical rhythm. I looked through the details, so I would advise you to read about it on the Internet - there is a great article on upbeat on 24ways , and another good A List Apart . There are also some vertical rhythm generators to stop you doing too many pixel games.

Answer 3

try adding the line-height attribute:

 div { background-color: rgba(255, 0, 0, 0.3); /* For visualization only */ margin-top: 50px; /* For visualization only */ height: 20px; /* This is fixed! */ line-height: 20px; } 

UPDATE

Setting the height and line-height to the same value aligns the text center to center:

Jsbin

If you use only 16px and 30px , that might be enough for you. If you need this to work with all values, I would suggest you use a different layout, something like this:

 <div class="container"> <span class="align-bottom">Hello g world</span> </div> 

Answer 4

I don’t think there is a CSS property for this, and I don’t think you can define it programmatically.

However, you can adjust the height of the div using JavaScript, assuming that the font section above the baseline is approx. 80%:

 var d = document.getElementsByTagName('div'); for(var i = 0 ; i < d.length ; i++) { d[i].style.height= d[i].offsetHeight*0.8+'px'; } 

First remove the gated div style height.

Fiddle: http://jsfiddle.net/38eLft8q/1/

Answer 5

A bit tricky and maybe not bulletproof, but still:

HTML

 <div class="first" title="Hello g World"></div> <div class="second" title="Hello g World"></div> 

CSS

 div { background-color: rgba(255, 0, 0, 0.3); margin-top: 50px; height: 20px; /* This is fixed! */ position: relative; } div:before { content: attr(title); position: absolute; bottom: -0.24em; } .first { font-size: 10px; } .second { font-size: 16px; } 

Jsbin

thanks for calling :)

UPDATE:

Without changes in the structure of the question, we will save the div text:

 <div class="first">Hello g World</div> <div class="second">Hello g World</div> 

and a little javascript will create the names

 var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { var txt = divs[i].innerHTML; divs[i].setAttribute('title', txt); } 

finaly some css changes

 div { background-color: rgba(255, 0, 0, 0.3); margin-top: 50px; height: 20px; /* This is fixed! */ text-indent: -9999px; position: relative; } div:before { content: attr(title); text-indent: 9999px; position: absolute; bottom: -0.24em; } 

Jsbin

If we can change the structure that will be

HTML

  <div class="first"><span>Hello g World</span></div> <div class="second"><span>Hello g World</span></div> 

CSS

 div { background-color: rgba(255, 0, 0, 0.3); margin-top: 50px; height: 20px; /* This is fixed! */ position: relative; } div span { position: absolute; bottom: -0.24em; } 

Jsbin

Note

• It is not checked with different fonts, but I think it is only for calculating the lower part.