nicht angemeldet
länge eines strings in pixel
hallo,
kennt jemand eine saubere lösung um die länge bzw. breite eines formatierten wortes in pixel zu bestimmen?
bisher plage ich mich immer mit so näherungslösungen herum, bei welchen eine durchschnittliche buchstabenbreite angenommen wird. aber das ist einfach nix.
danke vorab für alle ideen und idee-ansätze.
thomas
-
Hallo, Thomas,
kennt jemand eine saubere lösung um die länge bzw. breite eines formatierten wortes in pixel zu bestimmen?
bisher plage ich mich immer mit so näherungslösungen herum, bei welchen eine durchschnittliche buchstabenbreite angenommen wird. aber das ist einfach nix.
danke vorab für alle ideen und idee-ansätze.
werf doch mal einen Blick auf das u.a. Skript (nicht von mir) und adaptiere es ggf. für Deinen Zweck ...
Grüße,
Sebastian
-------------------------------------------------------------------
<html>
<head>
<title>[ m e d d l e ] .::. font detection</title><style>
A
{
font-family:Verdana,
Arial;color: #666666;
font-weight: bold;
text-decoration: none;
}BODY
{
font-family:Arial;
font-size:12px;
margin-top:75px;
background-color:#FFFFFF;
layer-background-color:#8C8C65;
color:#666666;
}h3
{
font-family:Arial;
font-size:16px;
font-weight: bold;
}.arialCSS
{
position:absolute;
top:30px;
left:30px;
font-family:Arial;
font-size:12px;
background-color:#FFFFFF;
layer-background-color:#FFFFFF;
color:#8C8C65;
}.testCSS
{
position:absolute;
top:55px;
left:30px;
font-family:Tahoma,Arial;
font-size:12px;
background-color:#FFFFFF;
layer-background-color:#FFFFFF;
color:#8C8C65;
}</style>
</head>
<BODY>
<h3>Font family detection: script</h3>
Yeah, I finally made a working example for this experiment. If I didnt say that before,
from now on <b>we're going to work on standards compliant browsers only
</b>
Don't want to give support to ns4/ie4 anymore. So let's start. Say you want to
build your site either in Tahoma 9px or in Arial 12px. How can you do this? CSS will
only let you decide a prioritary font-family and secondary fonts, but only one font
size, so you would end up either with Tahoma 9px or Arial 9px too.
<br>
<br>
<b>How does the script work?</b> You place your test font through CSS. In this case Tahoma.
As you can see, if Tahoma doesn't exist in your system, layer will be written in Arial.
Then we can check the width and height of both layers and see:
<br>
1.- They are different size: --> it was written in a different font, so you DO have that font in your system.
<br>
2.- They are the exact same size: --> it was written in same font, so you DO NOT have that font in your system.
<br>
<br>
OK, we can detect font availability. <b>What next?</b> How do we set CSS automatically?<br>
A lot of things can be done after this step, for instance, having several stylesheets
ans call them accordingly. Or save detection results in cookies and work from there. Or
change CSS on the fly using javascript. [etc.]<br>
In our case, we are going to change font size of a layer accordingly. As we said before,
we want either Tahoma 9px or Arial 12px. As we implied in style tag, default size is that
of Arial, at 12px, which will be in both layers. But if Tahoma exists, we will change that
layer to 9px.
<br><script language="JavaScript1.2">
/**************************************************************
Script name: "Detecting user Fonts" || Created: 31/10/2001
Author: Sergi Meseguer @ [http://meddle.dzygn.com] :: You can
use this code freely but please keep the credits intact, thanx.
**************************************************************/if(!d) var d = document;
d.write('<div id= "arialDiv" class="arialCSS">0 1 2 3 4 5 6 7 8 9 01 23 45 67 89</div>');
d.write('<div id= "testDiv" class="testCSS">0 1 2 3 4 5 6 7 8 9 01 23 45 67 89</div>');
function buildObj(obj){
this.evt = d.getElementById(obj);
this.css = this.evt.style;
this.w = this.evt.offsetWidth;
this.h = this.evt.offsetHeight;
}function init(){
arialObj = new buildObj("arialDiv");
testObj = new buildObj("testDiv");
uHave = ((arialObj.w == testObj.w) && (arialObj.h == testObj.h))?0:1;
uHaveT = (uHave==0)?"You DONT":"You";
uHaveC =(uHave==0)?"\n\nWe dont need to change font size.":"\n\nWe'll change font size accordingly.";
alert(uHaveT+" seem to have the font in your system."+uHaveC);
(uHave==1)?testObj.css.fontSize=9:0;
}onload=init;
</script></body>
</html>-
Hallo.
kennt jemand eine saubere lösung um die länge bzw. breite eines formatierten wortes in pixel zu bestimmen?
this.w = this.evt.offsetWidth;
this.h = this.evt.offsetHeight;offsetWidth und offsetHeight reichen aus. Das Script drumherum ist für etwas anderes gedacht. Im Archiv findet man sicher viel dazu, oder in Selfhtml, aber die Suche streikt momentan.
Beispiel:
<p><span onmouseover="alert('Breite: '+this.offsetWidth+', Höhe: '+this.offsetHeight)">murks</span></p>Mathias
-