HTML/CSS: Olikheter i text trots samma font och storlek?

JimmyAndersson · Inlägg av **JimmyAndersson** » 14 april 2011, 00:36:37

Jag får inte riktigt ihop detta...

I forumets kodrutor (code-taggarna) så används:

font-family: monospace;
font-size: 1.2em; (12,68833px i min webläsare.)
font-weight: normal;
font-weight 400
font-style normal
text-transform none
text-decoration none
letter-spacing normal
word-spacing 0
line-height 18.2px

Om jag använder exakt detta (kvittar om jag använder 1.2em eller 12,68833pix) i en egen css så blir det ändå inte likadant.
Forumets kodruta med grön text och resultatet av min kod med blå text:

Bild

"monospace" är ju visserligen samlingsnamnet på en rad typsnitt,
men i samma webläsare på samma OS (enbart olika flikar) så borde det ju ändå ha blivit likadant...

Finns det förresten något sätt att se vilket typsnitt som valts? Firebug verkar inte kunna se det.
Det verkar inte vara Courier eller Courier New, för det utseendet skiljer sig ännu mer.

Det verkar inte finnas någon css-klass som blivit ärvd och därför påverkar detta.

Orsaken till min fundering är inte för att jag ska kopiera forumet.

Det är så att jag ville ha ett typsnitt med samma vidd på alla tecken
och jag märkte att Courier New hade lite olika höjd på tecknen,
vilket gjorde det lite svårläst när det var en blandning av bokstäver
och siffror i samma "ord" (dvs hexadecimala tal).
Därför började jag klura på vad forumets code-rutor hade för typsnitt.

gOry · Inlägg av **gOry** » 14 april 2011, 02:10:17

codecontent ligger i postbody som i sin tur ligger i body

Och du har denna css för dessa element

Kod: Markera allt

body {
    color: #323D4F;
    font-family: "Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
}
.postbody {
    font-size: 1.3em;
    line-height: 1.4em;
}

Firebug säger allt detta till dig

JimmyAndersson · Inlägg av **JimmyAndersson** » 14 april 2011, 02:40:35

Aha!

"font-size: 1.3em;" (från postbody) är överstruken när man tittar på CSS'en (rad 239) med Firebug. Samma sak med allt du skrev från body.
Därför trodde jag inte att den användes, men nu ser jag att det blir annorlunda när man "stänger av" den raden.

Så för att sammanfatta är det alltså i tur och ordning:

Kod: Markera allt

.body{
    font-family: "Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
}

.postbody {
    font-size: 1.3em;
    line-height: 1.4em;
}

.codecontent {
    font-family: monospace;
    font-size: 1.2em;
    font-weight: normal;
    margin: 0 5px 10px;
    max-height: 400px;
}

Men monospace laddas ju sist, så då borde det väl vara den som används i kodrutan? Samma sak med font-size 1.2em.
När jag kopierar allt ovan (förutom namnen förstås) till en egen css och tittar med Firebug så blir det mycket riktigt:

font-family: monospace;
font-size: 1.2em;
font-weight: normal;
line-height: 1.4em;
margin: 0 5px 10px;
max-height: 400px;

Så då hade jag inte fel angående de överstrukna raderna.

Resultatet blir den nedersta raden i bilden:

Bild

(Där syns även mitt egentliga problem, dvs att siffror och bokstäver inte blir lika höga.
Resten av mina funderingar är mest av nyfikenhet.)

Hm..

gOry · Inlägg av **gOry** » 14 april 2011, 02:54:25

men din codecontent ligger den
<body>
<div class="postbody">
HÄR <div class="codecontent ">Innehåll</div>
</div>
</body>

Jag får de funka på pricken!

För att få de funka utan trix, så får man räkna lite, font-size blir runt 1.0em line-height 0.85?? låter för lite testa...

EDIT: Kom på en snilleblixt att line-height ändras inte.

Testa att bara köra med detta, så som du gjorde från början!
Tycker de ser lika ut

Kod: Markera allt

.codecontent  {
    color: #006600;
    direction: ltr;
    font-family: monospace;
    font-size: 1.0em;
    line-height: 1.4em;
}

EDIT 2: hittade en artikel som beskriver detta bättre än vad jag kan göra http://clagnut.com/blog/348/

JimmyAndersson · Inlägg av **JimmyAndersson** » 14 april 2011, 03:35:02

Ah, sådär ja! Nu ser det rätt ut.

Men vad var det jag missade? Jag ser inte felet.

Förklara gärna "men din codecontent ligger den" närmare.

Eller.. vänta nu. Har det att göra med 62.5%?
Dvs först minskas standardstorleken (16px?) för monospace med 62.5%
och sedan ökas resultatet med 1.2 gånger? Så man hamnar på 12px, dvs 0,75em?
Eller nåt sånt.

gOry · Inlägg av **gOry** » 14 april 2011, 04:01:07

default är 16px som är satt till 62.5% 16*0.625 = 10px

i postbody görs typsnittet större med 1.3 gånger 1.3*10 = 13px
i codecontent gör man den 1.2 gånger större 1.2*13 (13 efter som den ligger i postbody) = 15.6px dvs ungefär som defualt 16px
(Jag kan vara ute och cykla jag har inte så stor koll själv på detta...)

Så i min kod jag gav till dig sist, så behövs egentligen inte font-size radan men jag tar alltid som vana att skriva de hum...

JimmyAndersson · Inlägg av **JimmyAndersson** » 14 april 2011, 14:36:27

Intressant. Alltid lika kul att lära sig något nytt.

Tanken med "em" är bra, men det blir lite oöverskådligt, som man kan se av den här tråden
och då använde jag ändå Firebug. Det hade varit ännu värre att leta manuellt...
I just phpBB så är dessutom koden utspridd över väldigt många php-filer.

Men om man skriver en kommentar, som din uträkning, i varje klass så skulle man iofs kunna se det lättare.

Jag använder i princip alltid "px" och det är väldigt sällan som det har gett några problem med InternetExplorer.
Däremot har jag varit med om att färger har blivit fel. Har man angett bakgrundsfärgen på ett ställe och haft en bild
med samma bakgrundsfärg (t.ex med en logga) brevid så har det inte varit riktigt samma färg. (Det var för ca 5-6 år sedan.)

Typsnitt låter jag ibland ärvas genom klasserna, men nästan aldrig storlekarna. De anger jag nog nästan alltid i varje klass.
Det blir tillräckligt rörigt ändå när man kommer tillbaka långt senare och tittar på kodprojekt som är några hundra rader långa.

Ett tag gjorde jag kod som kollade vilken webläsare man hade och som laddade olika filer beroende på vilket man körde...

HTML/CSS: Olikheter i text trots samma font och storlek?

HTML/CSS: Olikheter i text trots samma font och storlek?

Re: HTML/CSS: Olikheter i text trots samma font och storlek?

Re: HTML/CSS: Olikheter i text trots samma font och storlek?

Re: HTML/CSS: Olikheter i text trots samma font och storlek?

Re: HTML/CSS: Olikheter i text trots samma font och storlek?

Re: HTML/CSS: Olikheter i text trots samma font och storlek?

Re: HTML/CSS: Olikheter i text trots samma font och storlek?