fonts in browsers

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ozzie PHP

Ozzie PHP

22/08/2016 00:37:12
Quote Anchor link
Hebben jullie dat ook wel eens dat een lettertype in de ene browser anders uitpakt dan in de andere? Soms behoorlijk irritant. In IE ziet het er prima uit, maar in FF staat er dan bijv. 1 woord op de volgende regel.

Dus in IE:

Iedereen die dit leest is gek.

En in FF:

Iedereen die dit leest is
gek.

Super irritant is dat. Het zal komen door een net iets andere interpretatie van font-sizes denk ik. Ik neem aan dat je er niks aan kunt doen, maar mocht dat wel zo zijn dan hoor ik het graag.
Gewijzigd op 22/08/2016 00:37:34 door Ozzie PHP
 
PHP hulp

PHP hulp

27/05/2026 02:57:37
 
Marthijn Buijs

Marthijn Buijs

22/08/2016 10:29:41
Quote Anchor link
Heb je een voorbeeld?
 
Ozzie PHP

Ozzie PHP

22/08/2016 12:32:22
Quote Anchor link
Nee niet wat ik zo kan laten zien, maar dat is ook niet nodig. Ik stel dus de font-size in, evenals de letter-spacing en word-spacing. Vervolgens zet ik tekst-align op 'justify' zodat de tekst netjes wordt uitgelijnd.

In Internet Explorer krijg je dan bijv. dit (netjes uitgelijnd):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
Dit is een  voorbeeldje  van
een  uitgelijnd  tekstje  om
aan je  te laten zien wat ik
nu eigenlijk daarmee bedoel.

In Firefox krijg je dan bijv. zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
Dit is een  voorbeeldje  van
een  uitgelijnd  tekstje  om
aan  je  te  laten  zien wat
ik   nu   eigenlijk  daarmee
bedoel.

In het laatste voorbeeld past op de 3e regel het woordje 'ik' er niet meer bij. Dat schiet dan naar de vierde regel, waardoor het woordje 'bedoel' op de vijfde regel uitkomt. Dat staat niet echt netjes. En dat is dus precies wat ik bedoel: in de ene browser gaat het goed, maar in de andere verspringt de tekst op een lelijke manier. En dat terwijl de font-sizes e.d. uiteraard precies hetzelfde zijn.
Gewijzigd op 22/08/2016 12:34:25 door Ozzie PHP
 
Wouter J

Wouter J

22/08/2016 12:45:23
Quote Anchor link
Geen verschil, sorry
http://output.jsbin.com/qifefumato/
 
Ozzie PHP

Ozzie PHP

22/08/2016 13:00:18
Quote Anchor link
Wouter ... hahaha ... het was een fictief voorbeeldje met een fictieve tekst om te laten zien wat er gebeurt. Of het met deze tekst gebeurt weet ik niet, het was puur ter illustratie om het effect te laten zien wat soms gebeurt.

Het gaat er dus om dat tekst in de ene browser wel nog op de regel past, en in een andere browser niet, waardoor effecten ontstaan zoals in mijn (fictieve) voorbeeldje hierboven.
 
Pipo Clown

Pipo Clown

22/08/2016 16:18:14
Quote Anchor link
Volgens mij is het al sinds jaar en dag zo dat de verschillende browser allemaal hun eigen wijze hebben bij het implementeren van, in ieder geval, maar niet beperkt tot, margins en paddings.

Daardoor wordt ook deze onhebbelijkheid veroorzaakt.
 
Ozzie PHP

Ozzie PHP

22/08/2016 16:28:12
Quote Anchor link
Wel irritant ... ik hoopte dat misschien iemand een leuke 'truc' had om die verschillen recht te trekken. Ik denk overigens niet dat het aan margins en paddings ligt, maar aan de wijze van (interpretatie van) font-rendering die per browser / type rendermodule verschilt.
Gewijzigd op 22/08/2016 16:28:45 door Ozzie PHP
 
Wouter J

Wouter J

22/08/2016 17:40:35
Quote Anchor link
Wellicht dat text-rendering: geometricPrecision; kan helpen. Overigens vind ik t wel apart dat je dit probleem nu niet in een reduced-example kan tonen, maar wel naar een oplossing zoekt. Het zou het helpen een stuk makkelijker maken als we het probleem zelf kunnen reproduceren.
 
Ozzie PHP

Ozzie PHP

22/08/2016 20:17:50
Quote Anchor link
@Wouter ... ik heb geen actueel voorbeeld, omdat ik die telkens oplos door een ander woord te gebruiken dat net iets korter is waardoor het dan wel ineens past.

Ik zal dit eens gaan proberen: text-rendering: geometricPrecision;

Thanks.
 



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.