892Underlining Text in CSS

Standard Underline, Standard Underline, Hamburgefonts

.standard-underline { text-decoration: underline; }

Bottom Border, Bottom Border Over, Hamburgefonts

.bottom-border { border-bottom: 2px solid red; }

Box Shadow, Box Shadow, Hamburgefonts

.box-shadow { box-shadow: inset 0px -3px 0 #72caff; }

Box Shadow, Box Shadow, Hamburgefonts

.box-shadow { padding-bottom: 2px; box-shadow: inset 2px -2px 0 yellow; }

874CodeMirror – A Browser-based Text Editor


809Measuring Text in Canvas

HTML Canvas allows for the drawing of text with
ctx.fillStyle = "666";		// text color
ctx.textAlign = "center";		// alignment
ctx.font = "normal 12px Helvetica Neue";		// font
ctx.fillText("my Text, x , y);		// draw
Sometimes, you might want to draw a border around the text. Getting the textHeight should not present a problem, after all we can set the font size directly. But textWidth is not fixed in that way, because it depends (nnnn) on the actual text that is being displayed. ctx.measureText takes the text as an argument and returns an object with a width property, describing the width of the text.
var texttWidth = ctx.measureText(columnName).width;
width is for now the only inhabitant of that object, but it would be a fair guess, that it might be more densely populate in the future.