473,396 Members | 2,037 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

px2em

when you get and objects offsets, width and height properties they are
given as pixels, "px".
..
Does JS has a internal function and/or cross browser hack to:
..
1._ check the font size of a certain styled dom object
..
2._ convert the pixels to em's?
..
I actually need to somehow figure out how much text can approximately
go into a textual area even though the use may resize the window and a
different language (with longer/shorter words) could be used.
..
How do you do something like that?

Thankx
otf

Apr 2 '06 #1
3 2274
VK

onetitfemme wrote:
when you get and objects offsets, width and height properties they are
given as pixels, "px".
.
Does JS has a internal function and/or cross browser hack to:
.
1._ check the font size of a certain styled dom object
.
2._ convert the pixels to em's?
.
I actually need to somehow figure out how much text can approximately
go into a textual area even though the use may resize the window and a
different language (with longer/shorter words) could be used.
.
How do you do something like that?


If you are using fixed font like Courier New then it is easy: the
amount of letters per line equals to the box "size" attribute ("cols"
in textarea)

For variable fonts like Times you are out of lack because JavaScript
doesn't have FontMetrics equivalent like in Java. Both em and ex units
refer to a certain glyph's *height*, which has very relative or none
correlation to the glyphs' width in the given typeset.

Apr 2 '06 #2
> If you are using fixed font like Courier New then it is easy: the
amount of letters per line equals to the box "size" attribute ("cols"
in textarea) otf: Actually an estimate if fine. I don't need to be exact to the
pixel and users could of course use which ever font they prefer.
I also thought of a general solution, not only for textareas
.. For variable fonts like Times you are out of lack because JavaScript
doesn't have FontMetrics equivalent like in Java. Both em and ex units
refer to a certain glyph's *height*, which has very relative or none
correlation to the glyphs' width in the given typeset.

otf: Well, I wasn't exactly thinking about having FontMetrics like in
Java ;-)
and I beg to differ with your general statement. I just scratched some
code quickly and tested it with Konqueror and Firefox just fine using
different font sizes and types. It does what is needed!!!
..
The idea is to just write some text in and check its properties. an
'm' was safely used, because it is a wide enough font.
..
<html>
<head><title>Object's internal space for text</title></head>
<style TYPE="text/css">
p{
margin: 0px;
border: 0px;
padding: 0px;

font-size: 1.0em;
/* font-family: Courier monospace; */
font-family: Times;
}

#testsize{
height: 100px;
width: 200px;
border: 1px solid black;
}

#testpsz{
font-family: arial;
background-color: lightblue;
}
</style>

<script language="JavaScript1.2">
<!--
function Space4Text(){
var iVSz00, iHSz00, iVSz02, iHSz02;
var DOMTestSize = document.getElementById('testsize');
iVSz00 = DOMTestSize.offsetHeight;
iHSz00 = DOMTestSize.offsetWidth;
alert(" DOMTestSize: " + DOMTestSize + " iVSz00: " + iVSz00 + ",
iHSz00: " + iHSz00);
// __
document.getElementById('testsize').innerHTML = '<p>this is an <span
id="testpsz">m</span> hfhfh.</p>';
var DOMPSize = document.getElementById('testpsz');
iVSz02 = DOMPSize.offsetHeight;
iHSz02 = DOMPSize.offsetWidth;
alert(" DOMPSize: " + DOMPSize + " iVSz02: " + iVSz02 + ", iHSz02: "
+ iHSz02);
// __
var iMs = parseInt((iHSz00/iHSz02));
var iLns = parseInt((iVSz00/iVSz02));
alert(" so, approximately " + iMs + "m\'s could be written in each of
the " + iLns + " lines, for a total of " + (iMs*iLns) + "
characters.");
}
//-->
</script>

<body onload="Space4Text();">
<div id="testsize"><div>
</body>
</html>

Apr 2 '06 #3
onetitfemme wrote:
when you get and objects offsets, width and height properties they are
given as pixels, "px".
.
True.
Does JS has a internal function and/or cross browser hack to:
No.
1._ check the font size of a certain styled dom object
window.getComputedStyle(...).getPropertyValue("fon t-size") (standards
compliant), window.getComputedStyle(...).fontSize (almost standards
compliant), ....currentStyle.fontSize (IE-proprietary).
2._ convert the pixels to em's?
`em' is a _relative_ length unit. In the `font-size' property value, `1em'
is equal to the computed font size of the parent element[1]. So the font
size of the current element is

parseInt(getComputedStyle(currentElement, null).fontSize, 10)
/ parseInt(getComputedStyle(currentElement.parentNod e, null).fontSize, 10)
+ "em"
I actually need to somehow figure out how much text can approximately
go into a textual area even though the use may resize the window and a
different language (with longer/shorter words) could be used.


You cannot know what `1em' of the default fixed-width font would be; /it/
defines what the `cols' value actually means. Ignore VK; he has yet to
understand the difference between default font (used for `cols' and `rows'
values), and computed font used for display), among many other things.

Could you please elaborate as to why you think you need to figure this out?
Maybe there are alternatives or aspects you have not considered yet.
PointedEars
___________
[1] <URL:http://www.w3.org/TR/CSS2/syndata.html#value-def-length>
Apr 2 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.