Font rendering win/mac/ipad

[Noctonix]

Hallo,

Ik heb een menu <ul> met 7 list items. Font size 11px font family arial, helvetica.
Het probleem is zodra ik de website op de mac of ipad bekijk springt de laatste list item naar de volgende regel (onder de eerste).

Ik heb al lopen zoeken en ben tot de conclusie gekomen dat apple een kleine blur om de teksten plakt, waardoor bij de mac/ipad meer ruimte tussen de letters komt en hij de laatste li op de volgende regel ploft.

Hier de CSS:

Cascading Stylesheet:

#header { clear: both; }
  #logo { clear: both; margin: 10px 0 15px 7px; }
  #header nav { clear: both; font-size: 11px; font-weight: normal; }
  #header nav ul li { float: left; position: relative; padding: 2px 10px; border-left: 1px solid #4C6B8B; text-transform: uppercase; }
  #header nav ul li.first { border-left: none; }
  #header nav ul li.last a{ color:#B9BE56; font-weight:bold; }
  #header nav ul li a { color: #4C6B8B; text-decoration: none; display:block; }

Het menu wordt via een costum CMS ge-genereerd. En ik mag geen uitzondering maken via php/javascript om bijvoorbeeld de font-size kleiner te maken voor de apple devices, omdat dit een lelijke code oplevert.

Heeft iemand enig idee wat ik hieraan kan doen om het op te lossen?
P.S. Ik houd de website liever geheim, aangezien dit een klant is van het bedrijf waar ik stage loop.

[ Voor 6% gewijzigd door Noctonix op 03-10-2012 09:54 ]

[noes]

Ruimte tussen de letters kan je beïnvloeden met de CSS property letter-spacing. Zet ook je font-size vast (mocht dit niet het geval zijn) en zorg dat je je margin van je ul en li reset (naar 0 of een voor jou geschikte waarde), gezien iedere browser zijn eigen defaults gebruikt. Goede tip op dat vlak: gebruik normalize.css (ook onderdeel van de HTML5 Boiler Plate).

[Noctonix]

noes schreef op woensdag 03 oktober 2012 @ 10:10:
Ruimte tussen de letters kan je beïnvloeden met de CSS property letter-spacing. Zet ook je font-size vast (mocht dit niet het geval zijn) en zorg dat je je margin van je ul en li reset (naar 0 of een voor jou geschikte waarde), gezien iedere browser zijn eigen defaults gebruikt. Goede tip op dat vlak: gebruik normalize.css (ook onderdeel van de HTML5 Boiler Plate).

Bedankt, maar letter-spacing werkt niet aangezien de letters al flink dicht op elkaar staan (arial uppercase 11px) de reset wordt al gezet boven in de stylesheet. En boiler plate toevoegen gaat een grote klus worden aangezien de website al maanden live staat en er sinds gisteren een menu optie (webshop) erbij moest komen.

[Bosmonster]

Font-rendering verschilt erg per OS en device en is dus ook nooit iets waar je pixel-perfectie op moet baseren.

[OkkE]

Hier nog een interessant artikel over font-rendering: http://www.smashingmagazi...r-look-at-font-rendering/

Noctonix schreef op woensdag 03 oktober 2012 @ 09:51:
[...]

Het menu wordt via een costum CMS ge-genereerd. En ik mag geen uitzondering maken via php/javascript om bijvoorbeeld de font-size kleiner te maken voor de apple devices, omdat dit een lelijke code oplevert.

Heeft iemand enig idee wat ik hieraan kan doen om het op te lossen?
P.S. Ik houd de website liever geheim, aangezien dit een klant is van het bedrijf waar ik stage loop.

De tekst 10 pixels maken.

Als je hele ontwerp 'uit elkaar valt' wanneer een font niet pixel-precies wordt weergegeven op een bepaald device, moet je je ontwerp aanpassen. Of je gebruikt een vaste breedte menu-items met white-space:nowrap; maar dat is eigenlijk ook lelijk.

Overigens, naast het verschil in rendering van 't font, je gebruikt een CMS. Wat als de klant de tekst van een item aanpast?

Sowieso moet je op 't web nooit iets pixel precies willen doen en al helemaal niet van pixel-precies afhankelijk zijn...

[ Voor 80% gewijzigd door OkkE op 03-10-2012 11:16 ]

[TheNephilim]

Vooral met webfonts (Google webfonts) kan het een drama zijn om de fonts juist weer te geven. Vooral in (jaja) Chrome wilde de tekst nog wel eens bobbelig zijn.

Standaard in html { font-style: normal; } wilde wel eens wat problemen oplossen. Nou zeg ik niet dat het hier meteen een oplossing bied, maar je kunt het proberen toch

[Anoniem: 25065]

Je zou eventueel met -webkit-font-smoothing of font-smoothing in je css de antialiasing kunnen manipuleren, maar dat lijkt me niet echt verstandig (Is geen standaard en wordt slecht ondersteund).

[_Thanatos_]

Anoniem: 25065 schreef op woensdag 03 oktober 2012 @ 15:38:
Je zou eventueel met -webkit-font-smoothing of font-smoothing in je css de antialiasing kunnen manipuleren, maar dat lijkt me niet echt verstandig (Is geen standaard en wordt slecht ondersteund).

Is ook niet verstandig, want dan bestaat het probleem nog steeds in Opera en Firefox op OSX. Het is dan ook geen probleem, het is gewoon een aspect waar je rekening mee moet houden. Letters zijn niet overal altijd even breed. Een bezoeker kan bijv ook een font zoom in het OS hebben ingesteld (aka "Large Fonts" in Windows). Dan worden ze breder én hoger (hoewel je dat compleet aan je laars lapt met 11px )

Zorg gewoon dat je styling zo is dat eventeel bredere karakters (of, hey, meer tekst?) mogelijk zijn en niet je layout laten ontploffen. Common practice.

[Noctonix]

Bedankt voor de reacties, het menu krijgt binnenkort een overhaul en komt er compleet anders uit te zien!

[Anoniem: 427045]

Je had ook modernizr kunnen gebruiken met het js script extern aangeroepen toch? Dat is niet onprofessioneel hoor

[Bosmonster]

Anoniem: 427045 schreef op dinsdag 09 oktober 2012 @ 21:55:
Je had ook modernizr kunnen gebruiken met het js script extern aangeroepen toch? Dat is niet onprofessioneel hoor

Volgens mij reageer je in het verkeerde topic, of ik heb geen idee wat jouw reactie met dit issue te maken heeft..