Align font baseline inside DIV or display content "outside" canvas

Question

I have a little design issue, which I cannot seem to get my head around. Maybe I can find some creative minds here who can point me into a direction - I believe I have a creativity blockade right now :(

Please have a look at the following example, before I explain. That makes things easier: http://jsfiddle.net/DV9SE/3/

<canvas id="mycanvas" width="100" height="20"></canvas>
<div id="mydiv">ASDqpjy</div>

#mycanvas {
  position:absolute;
  left:20px;
  top:20px;
  border:1px solid #999999;
}
#mydiv {
  position:absolute;
  height:20px;
  width:100px;
  left:20px;
  top:50px;
  border:1px solid #999999;
  font-family:arial;
  font-size:14px;
  line-height:2.2;
}

var canvas = $('#mycanvas')[0];
var ctx = canvas.getContext('2d');

ctx.font = '14px arial';
ctx.fillText('ASDqpjy', 0, canvas.height);

As you can see, it is very easy to put the baseline of a text at the very bottom of a canvas element. Which is precisely what I need for a project. The baseline must be at the bottom of an element (which I can later render movable through JQuery). The problem though: the text is cut off, as, evidently, the lower parts would be outside of the canvas and can thus not be rendered.

An alternative - or so I thought - was to put everything in a DIV, which makes rendering parts of the text possible, that is outside of the actual border/margin. The problem here though: I have to adjust the baseline by using css line-height. That is not an issue when it comes to one or two fonts. But since the project will allow for a font-selection with tens of fonts, it would be a complete nut-job to create a pixel-precise line-height rule for every single font.

Does anybody have an Idea how to work around this problem? How to possibly move the baseline of fonts consistently to the bottom of a DIV element, or a creative solution, how to display parts in a canvas, that are actually "outside" of it? ;)

Thanks a ton SO!

score 0 · Answer 1 · answered Jun 04 '13 at 16:06

0

You can use display:table-cell and vertical-align:bottom. Like here:

http://jsfiddle.net/DV9SE/1/

answered Jun 04 '13 at 16:06

Tim Wasson

3,606
16
16

Thanks a lot for your answer Tim. Your solution is not exactly what I was looking for though. You see, in your example, the font baseline is not precisely on the bottom margin of the div. The bottom of the "bounding box" is. But I need the baseline to be, like in the canvas. – tricon Jun 04 '13 at 16:11
It looks like you can replicate that by setting the `line-height` to be half of the `font-size`. Is this more like it? http://jsfiddle.net/DV9SE/2/ – Tim Wasson Jun 04 '13 at 17:11
Almost, but not exactly it either, I've tried this too. If you use a font-size of 60 or above and set the line-height to 30+ accordingly, you will notice that it is not exactly putting the font baseline to the lower div margin. Also, this solution did not work when I used more "unusual" fonts like calligraphic ones for example. – tricon Jun 04 '13 at 17:23
Maybe I should explain that the baseline position is so imperative in this project, because its exact coordinates are later sent to a php script which creates a PDF with POST-sent data. Thus the position is very important to be precise. – tricon Jun 04 '13 at 17:25

Align font baseline inside DIV or display content "outside" canvas

1 Answers1