Text visas fel i Safari

Tråden skapades och har fått 13 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Malmö
  • 2006-06-21 22:40

Jag är nybliven (ca en månad nu) Mac-användare och alla mina barnsjukdomar börjar försvinna och alla gamla PC-vanor startar att avta sakta men säkert (börjar slå fel på jobbets dator mellan copy & paste). Något jag dock inte lyckats lösa ännu och som är ett riktigt stort problem för mig är att somliga sidor i Safari och även Firefox visas inkorrekt för mig och eftersom en av dessa sajter är en jag skriver på konstant så har jag stora problem att få designen att klaffa och måste ständigt ta hjälp av min kollegor för att allt skall se rätt ut. Jag börjar tröttna på detta och jag hoppas att någon här vet lösningen.
Först kan jag introducera sajten jag driver/skriver för så ni ser den:

http://www.gamecore.se

Nu skall jag visa er skillnaden på hur sajten ser ut i explorer på PC respektive Safari på en Mac.

Apple -start
http://img312.imageshack.us/my.php?image=applestart6wl.png

PC - start
http://img310.imageshack.us/my.php?image=pcstart4mq.png

Apple - läsfält
http://img444.imageshack.us/my.php?image=appleread3uj.png

PC - läsfält
http://img310.imageshack.us/my.php?image=pcread9za.png

Kan ni se skillnaden? Saker och ting har klämts ihop rejält och texter slutar mycket tidigare i en spalt än de skall. Eftersom vi använder detta lite udda spaltsystem är det väldigt viktigt att man ser när en spalt är slut längdmässigt och med dagens inställningar på min Mac så är detta ett stort besvär, för att inte säga omöjligt och frusterande. "Blur"-texten på en Mac har jag vant mig vid vid det här laget så den irriterar inte längre men detta måste jag få bukt med.

Ni behöver inte påpeka att koden är dålig etc för det vet jag redan. Koden är över tre år gammal men grejen är att på Apple Center när jag testade Mac OC X så kontrollerade jag om sajten kunde visas i Safari och då fungera allt perfekt. Alltså går det att få det att se korrekt ut, frågan är bara hur. Who´s up for the challenge?

Sidans typsnitt är Arial och storleken är 8,5.

Självfallet har jag gått in i både Macens och Safaris font-inställningar och pillat. Jag hittar dock inte lösningen. Please help. Gör mig till en lycklig Mac-ägare.

  • Medlem
  • Neverland
  • 2006-06-22 00:26

Utan att vara expert på stilmallar så tror jag att jag ligger nära sanningen om jag påstår att den största anledningen till olikheterna ligger i hur textstorleken är definierad i css-mallen.

Det ser ut som att samma textmall läses in till samtliga webläsare, men storleken är bestämt i enheten ”pt”, vilket ger olika resultat på Mac och Win.

Det finns två sätt att lösa detta:
- göra en stilmall för Win IE och en för övriga, eller
- ange textstorlekar i enhet ”em” istället

Varför det funkade bättre då du testsurfade vet jag inte.

Jag hoppas att någon mer kunnig hittar tråden och antingen kommer med mer exakta tips eller rättar mig vid behov.

Om just detta gör dig till lycklig Mac-ägare vet jag inte, men du kommer troligen att bli en sådan iallafall.

(SÅ stor skillnad är det väl inte på de sidor du hänvisar till? Det går ju iallafall att läsa vad som står. Det finns många många värre exempel.)

Jag tror filuren är inne på helt rätt spår. Att ange texten i punkter ger olika resultat eftersom de olika plattformarna räknar på olika sätt (jag tror att det har att göra med den klassiska 72 dpi vs 96 dpi - men jag är inte säker på det).

Observera att jag säger plattformarna, för problemet är inte specifikt för Safari, Firefox på mac visar texten i samma storlek som Safari gör.

Punkter som enhet går helt enkelt inte att lita på. Vill du ha det lika stort så kan du använda pixlar eller möjligvis em. I ditt fall verkar 8.5pt motsvara 11px på macen när du egentligen vill ha det till 12px.

Men sen får man också acceptera att det kommer att se lite olika ut, just hur text flödar är väldigt svårt att ha kontroll över på webben. Folk har olika webbläsare, plattformar och kanske inte ens samma typsnitt inne osv. Det är ett av skälet till att du ser så få sajter som använder spalter på det sättet (ett annat är att folk är mera vana vid ett linjärt läsande på webben).

Jag tycker att storlekarna ser likvärdiga ut. Dock är Safari-bilden mer ihoptryckt hos Imageshack än Explorer-bilden, vilket lurar ögat lite. Det som inte är samma är radhöjden. Jag har själv råkat ut för detta med just Arial. Om detta bara gäller Arial eller är allmänt vet jag inte.

Specificera line-height till något passande så ska det stämma (bättre).

  • Medlem
  • Malmö
  • 2006-06-22 08:37

Line height alltså.... jag får slå en kik på det efter jobbet. Är det inne i samma inställningar som resten av font-inställningarna? Sen får ni tyvärr förklara vad em är för något. Är det Macens sätt att räkna pixlar eller typsnittstorlek?
Jag kikade snabbt på bildern aoch insåg också nu att det är mellanrummet mellan raderna som borde vara den avgörande faktorn eftersom alla text är på rätt ställe, tar slut vid rätt punkt etc i bägge versionerna.
Någon som vill ge mig instruktioner och gissningar på hur jag skall göra inställningarna och varifrån så får jag se om det vill fungera ikväll.

  • Medlem
  • Lund
  • 2006-06-22 12:12
Ursprungligen av Dogma:

Sen får ni tyvärr förklara vad em är för något. Är det Macens sätt att räkna pixlar eller typsnittstorlek?

Du kan läsa mer på Wikipedia. Kolla även W3C-länken på den sidan.

  • Medlem
  • Neverland
  • 2006-06-22 08:55

God morgon

Här är en sida du kan testa i båda dina miljöer: http://typetester.maratz.com

När du gjort dina val så klickar du på ”Gett CSS” (uppe till höger).

  • Medlem
  • Karlstad
  • 2006-06-22 09:20

1. Du ska aldrig använda punkter (pt) för webben. Det använder man för tryck.

2. Du säger heller inte vilka versioner av Safari du testat på. Det är ganska stor skillnad på de första och senaste versionerna av läsaren.

3. Hela idén med webben är att samma webbsida SKA kunna se annorlunda ut beroende på användarens egna önskemål. Därför SKA man göra så att en sida ska se hyfsat OK ut även om en användare kräver jättebokstäver för att kunna läsa. Du kan alltså ALDRIG kontrollera de detaljer du irriterar dig på. Om du så håller på och petar till f-n avlöser dig, så kommer det ALLTID att finnas webbläsare eller individer som visar/ser sidan på ett sätt som du kanske inte gillar. Glöm det. Move on.

Ursprungligen av Danne V:

2. Du säger heller inte vilka versioner av Safari du testat på. Det är ganska stor skillnad på de första och senaste versionerna av läsaren.

I det här fallet tror jag inte det spelar någon roll.

Ursprungligen av Danne V:

Du kan alltså ALDRIG kontrollera de detaljer du irriterar dig på.

Fast genom lite enkel CSS-ändring så är det väl precis vad han kan göra i det här fallet.

  • Medlem
  • Karlstad
  • 2006-06-22 15:25
Ursprungligen av Adrian B:

I Fast genom lite enkel CSS-ändring så är det väl precis vad han kan göra i det här fallet.

Nej, aldrig.
Användare kan ha sin egen stilmall, de kan ha slängt Arial, de kan ha gjort precis vad som helst så att webbsidor passar deras smak.
Du kan aldrig göra så att en webbsida ser likadan ut i alla läsare och hos alla användare, och man ska försöka så långt det går att ge utrymme för detta faktum.
Det är ett kardinalfel att göra en layout som rasar så fort någon har den minsta lilla avvikelse från idealet.
Det är ibland förjäkligt att det är så, men det är bara att acceptera...

  • Medlem
  • Malmö
  • 2006-06-22 19:55

Det behöver inte se exakt ut som på PC/Explorer men det måste vara nämre för just nu är det en gissningslek för mig när en spalt tar slut och nästa tar vid. Allt detta görs nämligen manuellt. Finns det något sätt att ändra luftavståndet mellan raderna och i så fall hur? Jag hittar det inte. Det enda jag finner är typsnitt och typsnittstorlekar.

  • Medlem
  • 2006-06-22 20:24

Radavståndet specificeras i CSS-filen. T.ex. "line-height: 1.5em;", eller anges i pixlar om du så föredrar.

/poken

  • Medlem
  • Malmö
  • 2006-06-23 02:01

You lost me.... jag är inte jätte hardcore-datoranvändare så du får tyvärr förklara vad CSS-filen är och vad den används till, och hur man når den. Såvida du inte menar att det är fonten själv som är problemet.

  • Medlem
  • Neverland
  • 2006-06-23 02:07

Här är css-filen: http://www.gamecore.se/gzon.css
Ladda hem och kolla.

Exempel ur filen:
.news_multi { font-family: arial, sans-serif; font-size: 8.5pt; color: #228EE9;}

1
Bevaka tråden