Notifikationer

Markér alle som læst Log ud

-zonic- Nybegynder

07. oktober 2009 - 00:47 Der er 7 kommentarer og
1 løsning

Tekst størrelse styret af fast bredde?

Hejsa,

jeg kom lige til at tænke på om man egentlig med html/css kan styre en text størrelse på baggrund af bredden på f.eks en div... således at hvert ord har en speciel størrelse så de fylder ex. 50px i bredden...

jeg har photoshop'et et lille eksempel.:

www.stephan.dyndns.dk/text.png

Håber I forstår hvad jeg mener :-)

På forhånd tak!

Synes godt om

Slater Ekspert

07. oktober 2009 - 08:11 #1

Ikke uden manuelt at sætte tekststørrelsen på hver linje, nej.

Der er højst text-align: justify; som udvider mellemrum så linjerne bliver lige lange, men det er jo slet ikke det samme.

Synes godt om

-zonic- Nybegynder

07. oktober 2009 - 09:55 #2

det er da egentlig lidt fesent.. det er faktisk en feature man tit kunne bruge.. :-)

Gad vide om ikke det kan løses med javascript ?

Synes godt om

Slater Ekspert

07. oktober 2009 - 15:58 #3

Ikke direkte. Så skulle det være et eller andet meget obskurt workaround, som jeg ikke lige kan tænke mig til. Problemet er, at du ikke finde bredden af en streng med Javascript.

- Selvfølgelig, hvis du bruger en monospace-font, er det ret trivielt at gøre, men med en font hvor hvert bogstav har sin egen bredde, er det så vidt jeg ved ikke muligt.

Til gengæld kan det nok lade sig gøre i Flash.

Synes godt om

olebole Juniormester

07. oktober 2009 - 18:35 #4

<ole>

... et eller andet meget obskurt workaround - viperine, du kalder jo på mig! ;D

Et hurtigt bud kunne være noget i stil med dette, selvom der nok skal pilles lidt med line-height:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#justifCont {
width: 80px;
font: bold 0 arial, tahoma, sans-serif;
margin: 60px;
}
#justifCont .hidden {
display: none;
}
</style>
<script type="text/javascript">

window.onload = function() {
var oCont = document.getElementById("justifCont"),
aTxt = oCont.getElementsByTagName("span")[0].firstChild.nodeValue.split(" "),
nSize = 0, nWidth = oCont.offsetWidth, o = null;
for (var i=0,j=aTxt.length; i<j; i++) {
o = document.createElement("span");
o.appendChild(document.createTextNode(aTxt[i]));
oCont.appendChild(o);
nSize = 0;
while (o.offsetWidth<=nWidth) o.style.fontSize = (++nSize)+"px";
if (o.offsetWidth>nWidth) o.style.fontSize = (nSize-1)+"px";
o.style.display = "block";
}
}
</script>
</head>
<body>

<div id="justifCont">
<span class="hidden">Text size due to width</span>
</div>

</body>
</html>

/mvh
</bole>

Synes godt om

-zonic- Nybegynder

08. oktober 2009 - 00:54 #5

det er sgu godt lavet olebole!!! kan man udvide den med line-height som du selv taler om? og en sidste ting, kan den udvides så man evt. siger at jeg vil have 4 ord på hver linje? :D

må efterhånden erkende at du er kodens gud :-)

Synes godt om

-zonic- Nybegynder

08. oktober 2009 - 12:00 #6

måske det endda ville være mere relevant at lave således at man bare tilpasser skriftstørrelsen til den linje man skriver på, hvis du forstår? det kan være man I en linje vil have ét ord, og en anden linje vil have 3 ord.. osv :-)

Synes godt om

-zonic- Nybegynder

09. oktober 2009 - 14:02 #7

æv.. tabte jeg dig her?

Synes godt om

-zonic- Nybegynder

26. oktober 2009 - 15:13 #8

nå.. ævbæv, du er smuttet... men smid et svar så får du point, hvis du da ser dette....

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS