Tips för följsam typografi i SiteVision

När webbplatsen fått responsiva mallar är det en liten utmaning att få typografin att fungera bra i alla brytpunkter och fönsterbredder. Den här artikeln beskriver några vanliga problem och tipsar om enkla och användbara lösningar.

Hindra radbrytningar från att ske på fel ställen

Bilden här till höger (klicka för stor version) visar exempel på problem som kan uppstå med en textrad på en responsiv webbplats när den visas på olika skärmstorlekar. Överst syns desktopversionen och därefter hur texten radbryts vid olika fönsterbredder.

Några av problemen som uppstår:

  • telefonnumret radbryts på oönskade ställen
  • rubrik och tillhörande information hamnar ibland på olika rader
  • ordet E-post radbryts vid bindestrecket

Normalt beteende för löpande text i webbläsare är att när ett (helt) ord inte får plats på en rad hoppar det ner på nästa rad vid första föregående mellanslag eller bindestreck. Vi vill helst att de olika grupperna av information ska hålla ihop och för att lyckas med det behöver vi tala om vid vilka mellanslag eller bindestreck texten inte får radbrytas. Det kan vi göra tack vare två specialtecken.

Hårt mellanslag

Hårt mellanslag är ett mellanslag som inte radbryts. Det är perfekt att använda i textmodulen när man t ex grupperar telefonnummer. Numret hänger då ihop även om det är uppdelat i grupper med mellanslag.

Hårt bindestreck

Hårt bindestreck är ett bindestreck som inte radbryts. Det är perfekt att använda som avdelare mellan riktnummer och direktnummer i telefonnummer. De kommer då hänga ihop på en rad.

Infoga dessa tecknen i SiteVision

Hårt mellanslag och hårt bindestreck finns bakom ikonen Infoga (plusset) under Specialtecken. Om du använder PC och vill infoga hårt mellanslag i ett sidnamn i navigatorn kan man hålla in Alt-tangenten och trycka 255 på nummerdelen av tangentbordet.

Skillnaden med och utan dessa tecken

Den övre raden i rutan här nedanför innehåller inte hårda mellanslag/bindestreck, den undre raden gör det. Förändra spaltbredden genom att dra i webbläsarfönstret och se hur raderna radbryts på olika sätt.

Adress: Magasinsallén 2     Telefon: 0611-550 771     E-post: info@limepark.se

Adress: Magasinsallén 2     Telefon: 0611‑550 771     E‑post: info@limepark.se

Långa ord i menyer

En annan sak som kan ställa till det på enheter med lite smalare skärmbredder är att långa ord i exempelvis en undermeny inte får plats, samtidigt som de inte kan radbrytas. Som standard radbryts ju inte långa ord i webbläsare om de inte innehåller ett bindestreck.

Exempel nedan på hur det kan se ut - menyalternativen blöder ut över innehållet.

Långa ord kan även vara ett problem i vanlig löptext då det kan bli stora hål i ett stycke när ett långt ord hamnar på en egen rad.

Mjukt bindestreck

Lösningen på ovanstående problem heter mjukt bindestreck. Det är så listigt att det inte skrivs ut så länge ordet får plats på en rad, men när hela ordet inte längre får plats skrivs bindestrecket ut och ordet radbryts efter tecknet.

Jag lägger till det mjuka bindestrecket i sidnamnet där jag vill att det ska brytas när utrymmet blir för kort. I SiteVisions navigator skrivs det alltid ut, vilket är bra då man lätt kan se var de används.

Exemplet nedan visar en bättre fungerande meny än ovan, tack vare mjuka bindestreck.

Så lägger du in mjukt mellanslag i SiteVision

I SiteVisions navigator på PC: Högerklicka och välj byt namn på önskad sida. Ställ textmarkören där tecknet ska in. Håll in Alt-tangenten och tryck in siffer­sekvensen 0173 på nummerdelen av tangentbordet. Släpp tangenten så dyker tecknet upp.

På Mac använder du Teckenvisaren: mjukt bindestreck hittar du genom att söka efter soft hyphen.

Jönköping

Jönköping

Limepark AB

Gjuterigatan 9
553 18 Jönköping
Vägbeskrivning

Stockholm

Stockholm

Limepark AB

Gotlandsgatan 46
116 65 Stockholm
Vägbeskrivning

Timrå

Timrå

Limepark AB

Folketshusvägen 10
860 35 Söråker
Vägbeskrivning

Örebro

Örebro

Limepark AB

Kansligatan 1
703 61 Örebro
Vägbeskrivning

Örnsköldsvik

Örnsköldsvik

Limepark AB

Magasinsallén 2
891 31 Örnsköldsvik
Vägbeskrivning

*

I supporten:
Per
AAA - Högsta kreditvärdighet