Jag vill räkna ut bredden i antal pixlar på en viss text. Har försökt med alla tänkbara medel men finner ingen lösning, någon ssom vet hur man gör detta med hjälp av javascript?
Det finns ett trick att göra detta, nämligen att man stoppar in texten i ett div-element.
Sen kan man läsa av clientWidth respektive clientHeight på div-elementet för att få höjden och bredden i pixlar.
(Vet ej dock hur stödet är bland olika webbläsare).
Jag slängde ihop en snabb funktion som jag bara har testat i Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Höjd och bredd på text</title>
<script type="text/javascript">
function getTextSize(text, size) {
// Skapa en ny div
var div = document.createElement('div');
// Stoppa in texten
div.innerHTML = text;
// Ställ in textstorleken
div.style.fontSize = size;
// Sätt absolut positionering för att bredden ska stämma
div.style.position = 'absolute';
// Lägg till diven i body
document.body.appendChild(div);
// Läs av måtten
var result = { 'width': div.clientWidth, 'height': div.clientHeight };
// Ta bort diven
document.body.removeChild(div);
// Returnera resultatet
return result;
}
window.onload = function() {
var foo = getTextSize('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', '12px');
alert('Textens bredd: ' + foo.width);
alert('Textens höjd: ' + foo.height);
}
</script>
</head>
<body>
</body>
</html>
På "den gamla goda tiden" när man satte text med bly och sedermera med fotosättare fanns det något som hette "tc-tal" som angav medelvärdet på ett typsnitts teckenbredd och kunde med hjälp av det samt radavstånd räkna ut ganska exakt hur bred/hög en textmassa skulle bli. Är det nåt sånt du menar?
Det finns ett trick att göra detta, nämligen att man stoppar in texten i ett div-element.
Sen kan man läsa av clientWidth respektive clientHeight på div-elementet för att få höjden och bredden i pixlar.
(Vet ej dock hur stödet är bland olika webbläsare).
Jag slängde ihop en snabb funktion som jag bara har testat i Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Höjd och bredd på text</title>
<script type="text/javascript">
function getTextSize(text, size) {
// Skapa en ny div
var div = document.createElement('div');
// Stoppa in texten
div.innerHTML = text;
// Ställ in textstorleken
div.style.fontSize = size;
// Sätt absolut positionering för att bredden ska stämma
div.style.position = 'absolute';
// Lägg till diven i body
document.body.appendChild(div);
// Läs av måtten
var result = { 'width': div.clientWidth, 'height': div.clientHeight };
// Ta bort diven
document.body.removeChild(div);
// Returnera resultatet
return result;
}
window.onload = function() {
var foo = getTextSize('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', '12px');
alert('Textens bredd: ' + foo.width);
alert('Textens höjd: ' + foo.height);
}
</script>
</head>
<body>
</body>
</html>
Hoppas den kommer till användning! :bire
Tackar, funkar verkligen klockrent.
All cred till dig, Troxy! =)
