Web fon line height probleem?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Joey Drieling

Joey Drieling

06/06/2013 16:09:37
Quote Anchor link
Goedendag,

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
___________
|  tekst  |
|         |
|_________|

bij FF en Chrome meer zo.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
___________
|         |
|         |
|__tekst__|

bij opera en andere webkit browsers klopt wel aardig als zo.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
___________
|         |
|  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
 
PHP hulp

PHP hulp

22/05/2024 11:03:56
 
Frank Conijn

Frank Conijn

06/06/2013 22:12:35
Quote Anchor link
Dan zul je per browser een andere line-height op moeten geven. Dat kun je doen op de volgende manier. In de head:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


En vervolgens maak je aparte klassen in je stijlblad:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
.ie span      {line-height: ..px;}
.firefox span {line-height: ..px;}

etc.
Gewijzigd op 06/06/2013 22:19:29 door Frank Conijn
 
Ozzie PHP

Ozzie PHP

06/06/2013 22:17:59
Quote Anchor link
@Frank: dit lijken mij operaties die niet aan te bevelen zijn. Wellicht is er een veel betere en minder drastiche oplossing. Misschien handig als de topic starter een URL heeft waarop een voorbeeld te zien is.
 
Joey Drieling

Joey Drieling

06/06/2013 22:36:49
Quote Anchor link
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. Nu klopt het zo als ik het wil. Aleen in FF en wat mobiele webkit browsers wilt hij een pixel hoger of lager staan, ten opzichte van de andere tekst met een andere font. Maar dat neem ik maar voor lief.
Gewijzigd op 06/06/2013 22:38:07 door Joey Drieling
 
Wouter J

Wouter J

06/06/2013 22:38:29
Quote Anchor link
Kun je misschien een voorbeeldje geven van je probleem? Ik ben wel benieuwd of ik (of iemand anders) het kan oplossen
 
Joey Drieling

Joey Drieling

06/06/2013 22:57:10
Quote Anchor link
Het probleem in eerste instantie kag aan de font zelf de glyphs liggen in de font afwijkend. Vandaar dat andere font dat oploste die zig wel normaal gedraagt.

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.
 
Frank Conijn

Frank Conijn

07/06/2013 01:55:51
Quote Anchor link
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?
 
Ozzie PHP

Ozzie PHP

07/06/2013 02:12:16
Quote Anchor link
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
 
Joey Drieling

Joey Drieling

07/06/2013 03:05:01
Quote Anchor link
Ik vond al snel na plaatsen van mijn vraag elders op het net, een andere discussie over mijn vraag zie http://stackoverflow.com/questions/6375822/font-face-and-line-height-issue

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
 
Ward van der Put
Moderator

Ward van der Put

07/06/2013 07:46:06
Quote Anchor link
Joey, heb je al een Reset CSS geprobeerd, bijvoorbeeld die van Eric Meyer? Die zet namelijk alle wit op 0 (daar kan die 1px vandaan komen) en gebruikt line-height: 1 zonder px, % of pt.
 
Joey Drieling

Joey Drieling

07/06/2013 08:05:27
Quote Anchor link
@ward heb ik ook al geprobeerd maar niks helpt, ook de font size in andere eenheden helpt niet.

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.
 
Frank Conijn

Frank Conijn

09/06/2013 10:00:11
Quote Anchor link
Ozzie PHP op 07/06/2013 02:12:16:
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.
 
Wouter J

Wouter J

09/06/2013 12:02:22
Quote Anchor link
Nogmaals Frank, misschien is jouw oplossing wel de enige juiste, al is juist niet het goede woord. Sommige compatibility problemen kun je helaas alleen met "code-smell" oplossen. Echter weten we dit niet omdat we te weinig informatie hadden (en hebben).
 
Ozzie PHP

Ozzie PHP

09/06/2013 16:19:23
Quote Anchor link
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
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

09/06/2013 20:22:27
Quote Anchor link
BTP
Normaal gesproken kan een css claas (of id) niet een browser probleem zijn (tenzij je css3) gebruikt.
 
Frank Conijn

Frank Conijn

09/06/2013 22:58:21
Quote Anchor link
Ozzie PHP op 09/06/2013 16:19:23:
Stel ik gebruik Opera als browser, dan moeten er eerst 10 checks worden uitgevoerd voordat de juiste browser geselecteerd is.
Dat gaat zó ontzettend snel, dat kun je niet eens meten in microseconden. Hooguit in nanoseconden, als je het daar al in kunt meten.

Ozzie PHP op 09/06/2013 16:19:23:
Mijn oplossing is maatwerk
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.


Ozzie PHP op 09/06/2013 16:19:23:
En ja, dit is een idioot voorbeeld, maar hopelijk maakt het iets duidelijk.
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.
 
Wouter J

Wouter J

09/06/2013 23:07:39
Quote Anchor link
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...
 
Ozzie PHP

Ozzie PHP

09/06/2013 23:11:02
Quote Anchor link
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
 
Joey Drieling

Joey Drieling

10/06/2013 00:14:03
Quote Anchor link
Goedendag,

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
 
Ozzie PHP

Ozzie PHP

10/06/2013 00:37:44
Quote Anchor link
Kun je aangeven wat er precies verkeerd gaat? Als je in je css bij span "float: left;" weghaalt lijkt het bij mij in IE en Firefox goed te gaan.
 
Frank Conijn

Frank Conijn

11/06/2013 19:43:15
Quote Anchor link
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.
Gewijzigd op 11/06/2013 19:47:09 door Frank Conijn
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.