How to Offset Line-Height Base Line

How to position text on a baseline?

After searching ...and searching I came up with this very awesome tutorial at adobe's place about how to align text to baseline of an element.

USING PSEUDO-ELEMENT

I would suggest this one but take a look at all the story bellow (Road from .strut element to a single 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>

HTML sup / tag affecting line height, how to make it consistent?

line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup> no longer interferes with it, but this will vary from font to font.

One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

sup { vertical-align: top; font-size: 0.6em; }

Another hack you could try is to use positioning to move it up a bit without affecting the line box:

sup { vertical-align: top; position: relative; top: -0.5em; }

Of course this runs the risk of crashing into the line above if you don't have enough line-height.

How to vertically align the baseline of text to a set point in HTML/CSS?

CSS can't change the position of the baseline. It is where it is, based on the font.

I would love
to do this by trial an error but this needs to work for any SVG file,
which could use any font, at any size. Therefore the margin is going
to be different each time.

That rules out any kind of "hack" to make it look right..

Take a look at all the possible values for vertical-align.

If none of those help, I don't know what to suggest.

Varying line-height and font-size causing gaps in inline-block elements

The line-heights of the spans are equal, but by default they are vertically aligning on the baseline of the text. Since the text is vertically centred in the spans, the baseline of the smaller text is higher in the span. So when the baselines are aligned, the tops of the spans with the smaller font are lower than the tops of the other spans.

You can vertically centre the spans using vertical-align: middle (or top or bottom, basically anything other than the default baseline) if you don't mind your text actually being vertically centred. This gives you what you're looking for, although it may seem like the smaller text is "floating" a little due the the baselines not being aligned any more.

(Also note that the height properties are having no effect on the spans).

Align baselines with characters in large line heights with Text Kit

I managed to get this working, but had to drop support for iOS 8 and macOS 10.10 unfortunately.

If you implement the following delegate call of the NSLayoutManager, you get to decide what to do with the baselineOffset for each line fragment:

optional func layoutManager(_ layoutManager: NSLayoutManager, 
 shouldSetLineFragmentRect lineFragmentRect: UnsafeMutablePointer<CGRect>, 
                       lineFragmentUsedRect: UnsafeMutablePointer<CGRect>, 
                             baselineOffset: UnsafeMutablePointer<CGFloat>, 
                           in textContainer: NSTextContainer, 
                   forGlyphRange glyphRange: NSRange) -> Bool

When the NSTextStorage is created and for each subsequent change, I enumerate all used font, calculate it's default line height (NSLayoutManager.defaultLineHeightForFont()) and store the biggest line height. In the implementation of the above mentioned delegate method I check the current line height of the NSParagraphStyle for the provided line fragment and align the font's line height within that value. From there the baseline offset can be calculated with the knowledge that the baseline sits between the font's ascender and descender. Update the baselineOffset value with baselineOffset.memory(newOffset) and everything should be aligned as you'd like.

Note: I'm not going in too much detail about the actual code used to implement this because I'm not sure I'm using the right values throughout these calculations. I might update this in the near future when the whole approach is tried and proven.

Update: Implementation of adjusting baseline. Every time the textContainer changes I recalculate the biggest line height and biggest descender. Then I basically do this in the layout manager's delegate function:

var baseline: CGFloat = (lineFragmentRect.pointee.height - biggestLineHeight) / 2
baseline += biggestLineHeight
baseline -= biggestDescender
baseline = min(max(baseline, 0), lineFragmentRect.pointee.height)
baselineOffset.pointee = floor(baseline)

How can I get the height of the baseline of a certain font?

I made a tiny jQuery plugin for that. The principle is simple:

In a container, insert 2 inline elements with the same content but one styled very small . and the other very big A.
Then, since there are vertical-align:baseline by default, the baseline is given as follow:

       ^ +----+ ^
       | | +-+| | top
height | |.|A|| v
       | | +-+| 
       v +----+

=======================
baseline = top / height
=======================

Here is the plugin in coffeescript (JS here):

$ = @jQuery ? require 'jQuery'

detectBaseline = (el = 'body') ->
  $container = $('<div style="visibility:hidden;"/>')
  $smallA    = $('<span style="font-size:0;">A</span>')
  $bigA      = $('<span style="font-size:999px;">A</span>')

  $container
    .append($smallA).append($bigA)
    .appendTo(el);
  setTimeout (-> $container.remove()), 10

  $smallA.position().top / $bigA.height()

$.fn.baseline = ->
  detectBaseline(@get(0))

then, smoke it with:

$('body').baseline()
// or whatever selector:
$('#foo').baseline()

--

Give it a try at: http://bl.ocks.org/3157389

---

Related Topics