Web fon line height probleem?
Ik gebruik een web font alleen per browser ligt hij anders in de line height.
bijvoorbeeld bij IE lijnt hij zo uit in een span element.
Code (php)
1
2
3
4
2
3
4
___________
| tekst |
| |
|_________|
| tekst |
| |
|_________|
bij FF en Chrome meer zo.
Code (php)
1
2
3
4
2
3
4
___________
| |
| |
|__tekst__|
| |
| |
|__tekst__|
bij opera en andere webkit browsers klopt wel aardig als zo.
Code (php)
1
2
3
4
2
3
4
___________
| |
| tekst |
|_________|
| |
| tekst |
|_________|
Ik heb al zitten spelen met de line height, maar dan schuif je alleen per browser het probleem op.
PS. De span is in werkelijkheid 40px hoog gelijk aan de font ook 40px, met 5px padding rondom.
Gewijzigd op 06/06/2013 16:14:11 door Joey Drieling
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
var browser = navigator.userAgent;
var htmlTag = document.documentElement;
if (browser.indexOf("Android") != -1) //first Android, then the rest
{htmlTag.className += " android not-ie"};
if (browser.indexOf("Mobile") != -1)
{htmlTag.className += " mobile"};
if (browser.indexOf("MSIE 7") != -1)
{htmlTag.className += " ie7 lte7 lte8 ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 8") != -1)
{htmlTag.className += " ie8 lte8 ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 9") != -1)
{htmlTag.className += " ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 10") != -1)
{htmlTag.className += " ie10 lte10 ie"};
if (browser.indexOf("Firefox") != -1)
{htmlTag.className += " firefox not-ie"};
if (browser.indexOf("Chrome") != -1)
{htmlTag.className += " chrome webkit not-ie"}; // first Chrome, then Safari
if (browser.indexOf("Safari") != -1)
{htmlTag.className += " safari webkit not-ie"};
if (browser.indexOf("Opera") != -1)
{htmlTag.className += " opera not-ie"};
</script>
var browser = navigator.userAgent;
var htmlTag = document.documentElement;
if (browser.indexOf("Android") != -1) //first Android, then the rest
{htmlTag.className += " android not-ie"};
if (browser.indexOf("Mobile") != -1)
{htmlTag.className += " mobile"};
if (browser.indexOf("MSIE 7") != -1)
{htmlTag.className += " ie7 lte7 lte8 ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 8") != -1)
{htmlTag.className += " ie8 lte8 ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 9") != -1)
{htmlTag.className += " ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 10") != -1)
{htmlTag.className += " ie10 lte10 ie"};
if (browser.indexOf("Firefox") != -1)
{htmlTag.className += " firefox not-ie"};
if (browser.indexOf("Chrome") != -1)
{htmlTag.className += " chrome webkit not-ie"}; // first Chrome, then Safari
if (browser.indexOf("Safari") != -1)
{htmlTag.className += " safari webkit not-ie"};
if (browser.indexOf("Opera") != -1)
{htmlTag.className += " opera not-ie"};
</script>
En vervolgens maak je aparte klassen in je stijlblad:
Code (php)
1
2
2
.ie span {line-height: ..px;}
.firefox span {line-height: ..px;}
.firefox span {line-height: ..px;}
etc.
Gewijzigd op 06/06/2013 22:19:29 door Frank Conijn
Gewijzigd op 06/06/2013 22:38:07 door Joey Drieling
Ik heb het niet online staan, staan thuis op de pc.
De afwijking in FF of enkele mobiele browsers licht aan feit dat browsers de line height kan variëren tussen de 110% en de 120%.
Ik heb daarom ook geprobeerd de line height te restten maar dat helpt niet.
Joey Drieling op 06/06/2013 22:36:49:
Zo als ozzie al zei ben ik niet van plan zulke oplossingen te gaan gebruiken. Ik heb een andere font genomen die er erg op lijkt, maar die zig wel normaal gedraagt.
OK, maar waarom stel je de vraag hier dan? Er is nog nauwelijks gelegenheid geweest om met een oplossing te komen. En hoe hadden we het moeten oplossen als Joey perse die font had willen houden, Ozzie?
Frank Conijn op 07/06/2013 01:55:51:
En hoe hadden we het moeten oplossen als Joey perse die font had willen houden, Ozzie?
Frank, wat wil je horen? Jij komt met een oplossing waar ik in 1e instantie niet voor zou kiezen. Vandaar ook dat ik gevraagd heb om een online voorbeeld. Wellicht had ik, of iemand anders, dan een betere, minder ingrijpende, oplossing kunnen bedenken. Een heel javascript om een line-height bij te stellen is niet een oplossing waarvoor ik zou kiezen, en zeker niet zonder mogelijke alternatieven te onderzoeken.
Gewijzigd op 07/06/2013 10:04:46 door Ozzie PHP
Van daar dat ik een font heb genomen die wel naar verwachting reageert.
De eerste font is 40px/110% dat werkt naar behoren.
De tweede font is 37px/130% hij is kleiner anders is hij groter dan de vorige. De line Heights is 130% om hem gelijk uitgelijnd te krijgen, alleen in FF + Safari wijkt hij 1px in hoogte af.
wat ik ook probeer in Opera, Chrome zelfs IE10 klopt hij alleen FF + Safari niet.
Gewijzigd op 07/06/2013 03:07:30 door Joey Drieling
De twee verschillende fonts zo als ik wil gaat niet. De een is 40px de ander 37px dan zijn ze net zo hoog. nu is 37px een oneven waarde, dus heeft geen middelpunt gelijk aan de 40px ernaast.
De meeste browsers behandelen de oneven waarde toch als even en plaats hem gelijk met de 40px, allee FF en Safari plaatsen hem niet op het middelpunt eigenlijk best logies.
Maar er 36px of 38px van maken is ook geen optie want dan is hij in de andere browsers 1px te lang of te kort.
Mijn besluit is om toch maar een font te gebruiken.
Ozzie PHP op 07/06/2013 02:12:16:
Frank, wat wil je horen?
Frank Conijn op 07/06/2013 01:55:51:
En hoe hadden we het moeten oplossen als Joey perse die font had willen houden, Ozzie?
Frank, wat wil je horen?
Een antwoord op mijn vraag: hoe hadden we het moeten oplossen als Joey perse die font had willen houden? En anders "Sorry, ik was te snel met het afkeuren van je oplossing." Want in normale omgangsvormen keur je niet iets af dat wel werkt maar jouw voorkeur niet heeft als je niet zelf met een alternatief op de proppen kunt komen.
Frank Conijn op 09/06/2013 10:00:11:
En anders "Sorry, ik was te snel met het afkeuren van je oplossing." Want in normale omgangsvormen keur je niet iets af dat wel werkt maar jouw voorkeur niet heeft als je niet zelf met een alternatief op de proppen kunt komen.
Haha, jij kan een paard laten lachen. Misschien had je beter cabaretier kunnen worden.
Ik weet niet in wat voor droomwereld jij leeft, maar ik ga je van m'n lang zal ze leven hiervoor m'n excuses niet aanbieden. Ik heb (gelukkig) het recht om ergens mijn visie op te geven, en die was volgens mij vrij helder. Dat jij daar dan verdrietig om bent en je in je eer voelt aangetast, ach... nou vooruit, daar wil ik dan best wel mijn excuses voor aanbieden hoor. Bij deze.
Ik zal het je nog een keer uitleggen. Ik vind jouw optie nogal drastisch. Stel ik gebruik Opera als browser, dan moeten er eerst 10 checks worden uitgevoerd voordat de juiste browser geselecteerd is. Dat lijkt mij niet wenselijk. Ik prefereer een meer generieke en doelgerichte aanpak in plaats van dit soort "trucs". Als noodoplossing zou je dit wellicht kunnen gebruiken, maar in mijn optiek moet je dat niet doen alvorens je eerst de mogelijke alternatieven hebt bekeken. En (om even te refereren aan jouw opmerking) een degelijke oplossing dan wel alternatief, kun je pas geven als je op de hoogte bent van de daadwerkelijke situatie. Dat is dan ook de reden waarom ik om een online voorbeeld vroeg.
Als jij in jouw eigen oplossing gelooft, vind ik het prima. Moet je ook vooral blijven doen. Mijn voorkeur gaat er echter niet naar uit. Ik zal jouw oplossing vergelijken met een real-life situatie. Stel, in een school is een gijzeling aan de gang. Op het moment van de gijzeling zijn er in het schoolgebouw 300 leerlingen aanwezig. Stel dat jij de politiechef zou zijn die de situatie moet oplossen dan zou jij zeggen: oh... oké, een gijzeling. Even m'n standaardlijstje erbij pakken. Hoe los ik dit ook altijd weer op. Ah... hebbes. Oké, gooi maar een bom op die school, dan is de gijzelaar dood! Probleem opgelost. Als ik de politiechef zou zijn, dan zou ik eerst zelf ter plaatse gaan, de situatie inschatten en een onderhandelaar en enkele scherpschutters inzetten. In jouw situatie zou iedereen (de gijzelaar en alle leerlingen) dood zijn, in mijn situatie zou iedereen het overleven, of misschien zou alleen de gijzelaar het loodje leggen. Mijn oplossing is maatwerk, die van jou is een standaard reactie die niet is afgestemd en dus niet in overeenstemming is met de werkelijke situatie. Jij zet zonder je eerst te oriënteren direct veel te groffe middelen in om een probleem op te lossen.
En ja, dit is een idioot voorbeeld, maar hopelijk maakt het iets duidelijk. En waarschijnlijk kom jij nu weer met een heel verhaal dat ik heel erg ongelijk heb, dat ik er niks van snap en dat ik m'n excuses wederom moet aanbieden. En dat mag best hoor. Iedereen heeft recht op z'n eigen mening, en bij mij hoef je daar gelukkig geen sorry voor te zeggen. De mensen hier op het forum zijn wijs genoeg om hun eigen conclusie te trekken.
Gewijzigd op 09/06/2013 16:21:18 door Ozzie PHP
Normaal gesproken kan een css claas (of id) niet een browser probleem zijn (tenzij je css3) gebruikt.
Ozzie PHP op 09/06/2013 16:19:23:
Dat gaat zó ontzettend snel, dat kun je niet eens meten in microseconden. Hooguit in nanoseconden, als je het daar al in kunt meten. Stel ik gebruik Opera als browser, dan moeten er eerst 10 checks worden uitgevoerd voordat de juiste browser geselecteerd is.
Ozzie PHP op 09/06/2013 16:19:23:
Hoezo "mijn oplossing"? Ik zie helemaal geen oplossing van je. En dat is ook de kern van mijn bezwaar tegen je attitude in deze discussie. Mijn oplossing is maatwerk
Ozzie PHP op 09/06/2013 16:19:23:
Idiote voorbeelden slaan over het algemeen de plank mis. Zo ook in dit geval, want alhoewel het een pittig middel is, is het niets, maar dan ook helemaal niets, vergeleken bij het wijdverbreide gebruik van jQuery voor het (de) minst geringste probleem (feature). En het is de enige oplossing, als de OP/TS de font had willen houden. Dat kun je rustig van me aannemen.En ja, dit is een idioot voorbeeld, maar hopelijk maakt het iets duidelijk.
Quote:
Zo ook in dit geval, want alhoewel het een pittig middel is, is het niets, maar dan ook helemaal niets, vergeleken bij het wijdverbreide gebruik van jQuery voor het (de) minst geringste probleem (feature).
Nee, maar dat gebruik van jQuery is weer niks vergeleken met het renderen van een mooie 3d game. jQuery heeft werkelijk niks hier mee te maken... (iets van drogargument...)
Quote:
En het is de enige oplossing, als de OP/TS de font had willen houden. Dat kun je rustig van me aannemen.
Ik ben benieuwd hoe jij tot deze conclusie kan komen zonder dat je ook maar iets weet van de situatie van de TS...
Frank Conijn op 09/06/2013 22:58:21:
Dat gaat zó ontzettend snel, dat kun je niet eens meten in microseconden. Hooguit in nanoseconden, als je het daar al in kunt meten.
Uiteraard kun je het daar wel in meten. Ik snap best je gedachte, maar wanneer je dit soort checks kunt voorkomen is het uiteraard beter.
Frank Conijn op 09/06/2013 22:58:21:
Hoezo "mijn oplossing"? Ik zie helemaal geen oplossing van je. En dat is ook de kern van mijn bezwaar tegen je attitude in deze discussie.
Mijn oplossing had betrekking op de situatie die ik schetste. Verder gaat het hier niet om mijn attitude of om jouw attitude. Het gaat om een oplossing voor de topicstarter. Hiervoor kan ik geen passende oplossing geven, omdat ik het probleem niet voldoende ken, net zo min als jij.
Frank Conijn op 09/06/2013 22:58:21:
Idiote voorbeelden slaan over het algemeen de plank mis. Zo ook in dit geval, want alhoewel het een pittig middel is, is het niets, maar dan ook helemaal niets, vergeleken bij het wijdverbreide gebruik van jQuery voor het (de) minst geringste probleem (feature). En het is de enige oplossing, als de OP/TS de font had willen houden. Dat kun je rustig van me aannemen.
Ik geloof niet dat dit voorbeeld de plank misslaat. Jij denkt dat jouw oplossing de enige is, echter zonder de daadwerkelijke situatie te kennen kun je dat helemaal niet zeggen. Ik weet ook niet waarom je jQuery er bij betrekt, maar ben het met je eens dat dat vaak ten onrechte wordt ingezet.
Voor de rest valt het me op dat jij (ook in eerdere topics) moeilijk kunt omgaan met kritische feedback. Hou voor ogen dat feedback niet persoonlijk tegen jou als persoon gericht is. Ik ken je namelijk helemaal niet. Zie het gewoon als iets waar je mogelijkerwijs iets van kunt leren.
Gewijzigd op 09/06/2013 23:15:49 door Ozzie PHP
Ik heb ff mijn oude situatie online gezet http://rakoda.uphero.com/
M.V.G. Joey
Gewijzigd op 10/06/2013 00:14:33 door Joey Drieling
Wouter J op 09/06/2013 23:07:39:
Ik ben benieuwd hoe jij tot deze conclusie kan komen zonder dat je ook maar iets weet van de situatie van de TS...
Dit zegt toch het een en ander:
Joey Drieling op 06/06/2013 16:09:37:
Ik gebruik een web font alleen per browser ligt hij anders in de line height. (...)
Ik heb al zitten spelen met de line height, maar dan schuif je alleen per browser het probleem op.
Ik heb al zitten spelen met de line height, maar dan schuif je alleen per browser het probleem op.
Gewijzigd op 11/06/2013 19:47:09 door Frank Conijn