[HTML en CSS] Font-size - Softwareontwikkeling

maandag 9 november 2009 08:57

Acties:

0 Henk 'm!

Topicstarter

Beste tweakers,

Tijdens het uitvoeren van een (school)opdracht kwam ik verschillende keren het probleem tegen met verschillende font-sizes. Dus de grootte van de lettertypes werden anders weergeven in andere browsers. Nu ben ik tot de volgende website gekomen *klik.

HTML code van de site:

HTML:

<p style="font-size: 100%">This font is 100%</p> <!-- 100% -->
<br>
<p style="font-size:  1em">This test is 1em</p> <!-- size (x)em -->
<p style="font-size:  2ex">This font is 2ex</p> <!-- size (x)ex -->
<br>
<p style="font-size:  larger">This font is larger</p> <!-- larger, smaller etc... -->

<p style="font-size: 12pt">This font is 12pt</p> <!-- size (x)pt -->
<p style="font-size: 20px">This font is 20px</p> <!-- size (x)px -->
<p style="font-size: 20">This font is 20</p> <!-- size (x) -->

<p style="font-size: 0.15in">This font is 0.15in</p> <!-- size (x)in -->
<p style="font-size: 0.4cm">This font is 0.4cm</p> <!-- size (x)cm -->
<p style="font-size: 4mm">This font is 4mm</p> <!-- size (x)mm -->
<p style="font-size: 1pc">This font is 1pc</p> <!-- size (x)pc -->

Nu had ik vaak het probleem bij bijvoorbeeld de volgende opbouw. Het probleem was dat in de CSS het attribuut P een bepaalde size had en A ook. Nu kwam het weleens voor dat P netjes 14px was alleen A dus veel kleiner. Terwijl ook 14px bij A stond...

HTML:

1	<p>Informatie tekst <a href="#">link</a></p>

Is het zo dat in de CSS de grootte van P bekeken wordt en A daarop geschaald wordt? Hoe werkt dit precies met het "gedrag" van de browser?
_{Kan iemand een link geven wanneer die het wel gevonden heeft op Google, want mij is het niet gelukt...}

Alvast bedankt $_/-\o_$

Twitter Flickr

maandag 9 november 2009 09:16

Acties:

0 Henk 'm!

Patriot

Fulltime #whatpulsert

Pixels zijn absoluut, een anchor binnen een p-tag zal dus geen tekstgrootte relatief ten opzichte van de parent krijgen als je deze in pixels aangeeft. Dat betekend dus dat je iets hebt gedaan waardoor die links toch een andere grootte kregen.

Verder horen tekstgroottes tussen verschillende browsers niet zomaar te verschillen als je ze absoluut aangeeft. Als er toch verschillen zijn is het verstandig om eerst even te controleren of daar geen reden voor te vinden is bij de instellingen van de gebruiker. Als je zeker weet dat er geen instellingen zijn die de tekstgrootte beïnvloeden, dan zou ik nog even terugkomen met je precieze probleem waar we je dan wellicht verder mee kunnen helpen.

maandag 9 november 2009 09:17

Acties:

0 Henk 'm!

truegrit

In principe zal A dezeflde grootte hebben als de P. Wanneer je echter op A specifiek een relatieve grootte zet, zoals dit:

Cascading Stylesheet:

1 2	p { font-size: 0.8em; } a { font-size: 0.8em; }

dan krijg je dat de <a> inhoud 0.8 keer zo groot is als de tekst in de <p> tag. Misschien dat dat de reden is dat je verschil in tekstgrootte ziet?

hallo

maandag 9 november 2009 09:24

Acties:

0 Henk 'm!

Morphine

Waar je ook rekening mee moet houden is schaalbaarheid van lettertypen. Als je pixels gebruikt zal in IE6 (of was dat nog lager dan ie6..) de fonts niet meeschalen.

Maar omdat veel ontwerpers in Photoshop in punten (/pixels) werken wil je dat zelf het liefste ook.. Wat ik hiervoor doe is op de body{} de font-size op 10px zetten.

En vanaf daar met em werken. Dus in onderstaand voorbeeld wil ik bijv. de P op 12px hebben. Dan zet ik deze op 1.2em.

code:

<body>
<div>
 <p>hoi</p>
</div>
</body>

maandag 9 november 2009 09:24

Acties:

0 Henk 'm!

JefSnare

Topicstarter

truegrit schreef op maandag 09 november 2009 @ 09:17:
In principe zal A dezeflde grootte hebben als de P. Wanneer je echter op A specifiek een relatieve grootte zet, zoals dit:
Cascading Stylesheet:
1
2
p { font-size: 0.8em; }
a { font-size: 0.8em; }
dan krijg je dat de <a> inhoud 0.8 keer zo groot is als de tekst in de <p> tag. Misschien dat dat de reden is dat je verschil in tekstgrootte ziet?

In een testcase kan ik dit probleem inderdaad reproduceren. In principe zou je allebei dus absoluut moeten maken.

@Patriot
Het verschil in de browsers had te maken met h1 tags in een p genesteld

HTML:

<p>
     <h1>Reacties</h1>
      <p>Heel veel tekst</p>
</p>

Is natuurlijk stom, mede-student had foutje in PHP code vervolgens ik in de CSS waardoor alles in de soep draait qua uiterlijk

Probleem is inderdaad opgelost wanneer ik 14px gebruik voor P en de A gewoon niet declareer qua font-size. Ik kan hem nu wel "stellen" met de (x)em.

EDIT: @Morphine:
Bedankt, dat werkt zelfs nog beter! Tis veel makkelijker schalen en werken zo. $_/-\o_$

EDIT (2.0): mede-tweakers, bedankt! Problem solved en dit staat weer weggeschreven in mijn geheugen $_/-\o_$ .

[ Voor 17% gewijzigd door JefSnare op 09-11-2009 09:28 ]

Twitter Flickr

maandag 9 november 2009 09:35

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

JefSnare schreef op maandag 09 november 2009 @ 09:24:
[...]
Het verschil in de browsers had te maken met h1 tags in een p genesteld

Wat sowieso invalid HTML is...

Intentionally left blank

maandag 9 november 2009 09:43

Acties:

0 Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

JefSnare schreef op maandag 09 november 2009 @ 08:57:

_{Kan iemand een link geven wanneer die het wel gevonden heeft op Google, want mij is het niet gelukt...}

http://www.w3.org/Style/CSS/#specs

specifiek:
http://www.w3.org/TR/CSS21/fonts.html#font-size-props
en daarbinnen:
http://www.w3.org/TR/CSS2...l#value-def-absolute-size
http://www.w3.org/TR/CSS2...l#value-def-relative-size
http://www.w3.org/TR/CSS21/syndata.html#value-def-length
http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage
http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit

hooguit kun je bij bovenstaande links stellen dat alhoewel CSS2.1 de standaard is, sommige browsers deze nog niet helemaal juist geimplementeerd hebben

verder is het zo dat de CSS-standaard ook veel ruimte biet aan een UA bepaalde elementen zelf te interpreteren of anders toe te passen, als deze UA bv bepaalde waardes niet juist ter beschikking heeft (specifiek bij de toepassing van fonts en font-groottes is dat zo; de UA heeft altijd de ruimte om ook terug te vallen op een vervangend font of alternatieve font-grootte: zie ook http://www.w3.org/TR/CSS21/cascade.html#value-stages)

crisp schreef op maandag 09 november 2009 @ 09:35:
[...]

Wat sowieso invalid HTML is...

In gewone HTML kan dit wel, maar wordt de P-tag impliciet afgesloten voor dat Hx-tag...
als deze dus bv margins heeft wordt de bottom-margin toegepast vóór de Hx-tag

[ Voor 11% gewijzigd door RM-rf op 09-11-2009 09:45 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 9 november 2009 09:54

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

RM-rf schreef op maandag 09 november 2009 @ 09:43:
[...]
In gewone HTML kan dit wel, maar wordt de P-tag impliciet afgesloten voor dat Hx-tag...
als deze dus bv margins heeft wordt de bottom-margin toegepast vóór de Hx-tag

Klopt, het is ook uiteindelijk de sluit-tag zonder open-tag (want die is impliciet afgesloten) die het invalid maakt.
Overigens ben je in dat soort gevallen ook enigszins overgeleverd aan soms brakke implementaties; IE sluit een <p> bijvoorbeeld niet impliciet bij een geneste table (zal ws in IE8's standards compliant mode wel gefixed zijn).

Intentionally left blank

maandag 9 november 2009 15:53

Acties:

0 Henk 'm!

JefSnare

Topicstarter

@crisp:
De invalid HTML werd gecreëerd door een verkeerde nesting van PHP elementen. Ik dank mijn mede-student voor die fout...

@RM-rf:
Bedankt voor die links en je info hierover, genoeg om eens even goed naar te kijken

Twitter Flickr

dinsdag 10 november 2009 12:22

Acties:

0 Henk 'm!

Verwijderd

Als je de in de body tag de font-size op 62.5% zet kan je via de em heel makkelijk scalen:

1.2 em = 12px
1.5 em = 15px
2 em = 20px
etc.

dinsdag 10 november 2009 13:44

Acties:

0 Henk 'm!

Cartman!

JefSnare schreef op maandag 09 november 2009 @ 15:53:
@crisp:
De invalid HTML werd gecreëerd door een verkeerde nesting van PHP elementen. Ik dank mijn mede-student voor die fout...

PHP-elementen? In feite moet je voor clientside problemen alleen naar de output kijken en dan had je dat al direct kunnen spotten natuurlijk

dinsdag 10 november 2009 15:41

Acties:

0 Henk 'm!

JefSnare

Topicstarter

Cartman! schreef op dinsdag 10 november 2009 @ 13:44:
[...]

PHP-elementen? In feite moet je voor clientside problemen alleen naar de output kijken en dan had je dat al direct kunnen spotten natuurlijk

Uiteraard, echter was in de PHP code iets verkeerd gedaan.

PHP:

while($get_item=mysql_fetch_array($get_rows) > 0){
echo '<p>';
  echo '<h1>'.stripslashes($get_item[title]).'<h1>';
    echo stripslashes($get_item[tekst]);
echo '</p>';
}

We hadden er echter voor gezorgd dat bij de insert alles rond <p> tags werd gezet (enters en tabs). Hieronder output van Database;

code:

1	<p>Dit is een intro</p><p>Dit is een tekst</p>

Nu is alles weer verbeterd en met jullie tips erbij veel makkelijker om alles te schalen, hieronder de verbeterde code;

PHP:

while($get_item=mysql_fetch_array($get_rows) > 0){
  echo '<h1>'.stripslashes($get_item[title]).'<h1>';
    echo stripslashes($get_item[tekst]); //zonder p tags, want die zitten in DB
}

En de css;

Cascading Stylesheet:

body{
 font-size: 62.5%;
 margin: 0
}
.body h1{
 font-size: 2em;
}
.body p{
 font-size: 1.2em;
}

Bij een standaard debug had dit natuurlijk naar voren moeten komen

Twitter Flickr

dinsdag 10 november 2009 15:51

Acties:

0 Henk 'm!

Savantas

[taxonomist-mode]
Overigens is a als element normaal een inline element, hij kan voorkomen in een lijst, paragraaf/alinea, kop etc. Daarom moet je hierin dan ook niet iets als lettergrootte opgeven, die hoort altijd geërft te worden van het bovenliggende blockelement. Alleen om duidelijk te maken wat een link is (en welke bezocht zijn, etc) geef je zaken als kleur, underline etc op voor a.
[/taxonomist-mode]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)