Skip to content

Instantly share code, notes, and snippets.

@andipollok

andipollok/dabblet.css

Created May 8, 2014 14:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andipollok/7bd6aee8a2376086bd36 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andipollok/7bd6aee8a2376086bd36 to your computer and use it in GitHub Desktop.
Download ZIP
Align text on typographic baseline at absolute position on page
Raw
dabblet.css
/**
* Align text on typographic baseline at absolute position on page
* http://en.wikipedia.org/wiki/Baseline_(typography)
* also see discussion on SO http://stackoverflow.com/questions/6178506/css-display-text-at-descent-instead-of-baseline
*/
.position {
position:absolute;
top:100px;
left:50px;
}
.showBaseline { /* the red baseline - this line is just there for debug purposes */
width:100%;
height:1px;
background-color:red;
position:absolute;
}
.textoffset {
width:0px;
height:99999px;
background-color:yellow;
display:inline-block;
}
.text {
position:relative;
top:-99999px;
font-size:3em; /* font-size can be changed */
font-family:serif;
display:inline-block;
vertical-align:baseline; /* just to be sure */
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="position">
<div class="showBaseline"></div>
<div class="textoffset"></div>
<div class="text">text aligned on baseline yxlg</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment