/    Sign up×
Community /Pin to ProfileBookmark

Getting the height of text in a <td> or <iframe>?

Copy linkTweet thisAlerts:
Feb 21.2005

I originally posted this in the Javascript forum, as I was implementing this with Javascript. “Willy Duitt” replied that my answer “lays in CSS and em…”. Well, I tried searching, but since the search engine here requires that words in a search have at least 4 letters, I can’t search on those terms. So I ask your indulgence in pointing me to a reference or tutorial that helps with the following…

I want to make the text size on a page “dynamic”, in that I’d like to increase the font size to fill an iframe. I’m worried about the height, not the width. For example, I’d like my title to keep increasing in size if the browser was made larger (since everything on my page is done in percentages), and respond if it was smaller. It would also be nice to handle font changes (since my page template could be edited and a different font used).

Is there a way in Javascript to get the “text metrics” of a given font to see how big I can make the text before I start clipping the tops or the descenders?

I’ve tried searching, but I either search too broadly (e.g. javascript text height) or too narrowly (don’t find anything relevant).

Thanks!

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@_Aerospace_Eng_Feb 23.2005 — y not use percentages for font sizes? check out this link for more info http://www.w3schools.com/css/pr_font_font-size.asp
Copy linkTweet thisAlerts:
@GuyWithDogsauthorFeb 23.2005 — Here's a test file that I created to try playing with this. It actually gets loaded into an iframe in a different page, but you can get the same effect I'm looking for by just loading this file into IE (or your preferred browser, but I'm only using IE6 since this is getting loaded into a program that I wrote that uses the IE6 ActiveX control for rendering). Make the browser wide, but short (think 100 pixels high or so)

[CODE]<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
margin:0px;
padding:0;
background-color: blue;
background-image: url('smallimg.jpg');
background-attachment: fixed;
}

td.nofs {
vertical-align:middle;
color: yellow;
font-family: Verdana;
}

td.fs300 {
vertical-align:middle;
color: yellow;
font-family: Verdana;
font-size: 300%;
}
</style>
<script>
// This function sets the first and last column to the width of the available scrolling area for
// scrolling lead-in
function setColWidth() {
var imgSize = document.body.clientHeight - (2 * document.getElementById("infoTable").getAttribute("cellpadding")) - (2 *

document.getElementById("infoTable").getAttribute("cellspacing"));;
document.getElementById("firstCol").width = 0.5 * document.body.clientWidth;
document.getElementById("lastCol").width = 0.5 * document.body.clientWidth;

// Comment out this line to get onst sizing effect only from the class assigned to <td>
// document.getElementById("middleCol").style.fontSize = imgSize + 'px';
}
</script>
</head>
<body onload="setColWidth()" scroll=no topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" onresize="setColWidth()">
<table id="infoTable" border="0" cellpadding="5" cellspacing="5" summary="">
<tr>
<td id="firstCol" nowrap width="100%">&nbsp;</td>
<td id="middleCol" class="nofs" nowrap>How big is this text?</td>
<td id="lastCol" nowrap width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>[/CODE]

As shown, with the line commented out, the font size ends up as the same size as the default text. IF you make the browser window bigger or smaller, the size never changes.

If you change the class assigned to middleCol to be fs300, then the font size gets bigger, but never changes as you make the browser taller or shorter.

If you uncomment the line, then the text size does adjust, but it's usually a little too big and the descenders don't appear properly.

What I want to do is get the biggest text size that appears properly, no matter how tall or short you make the window. I don't care how wide the text is -- I just want it to appear in the strip of browser you give it.
×

Success!

Help @GuyWithDogs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...