Hej!
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?
Tack på förhand & trevlig Lucia.
/oGGo
Räkna ut textbredd
4 svar · 657 visningar · startad av oGGo
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
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?
Troxy skrev:
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! =)
Tack tack tack!!!
Varsågod! Jag blev lite överraskad själv när jag såg att det även fungerar i såväl IE som Safari. :)