Kebmans blogg

Avsnitt og mellomtitler

Posted in Design, Journalistikk, Media, Typografi by kebman on 08/11/2012

Et avsnitt er en samling setninger som handler om samme tema. Det er en måte å dele opp teksten på slik at den blir lettere å lese.

Ta for eksempel en artikkel om hvordan en bil er skrudd sammen. En måte å systematisere hvordan bilen er laget, er ved å beskrive den med ett avsnitt for hver bildel. Slik blir det også enklere å lage mellomoverskrifter. Avsnittet om motoren, kan f.eks ha mellomoverskriften «Motor». Kanskje finner du ut at du kan dele opp informasjonen om motoren i ytterligere avsnitt senere, og da gjør du det.

Ahem, så forrige avsnitt handlet om oppbyggingen av avsnitt ved å bruke bil som eksempel… Nå har jeg startet et nytt avsnitt fordi det handler om hvorfor forrige avsnitt er avsluttet. 😉

Hvordan skille mellom avsnitt

Når du skriver brev kan du skille mellom avsnitt med dobbelt linjeskift, altså to trykk på retur-tasten (eller enter). Da får du en blank linje mellom avsnittene. Men dette tar unødvendig mye plass, så innen god norsk avis- og magasintypografi brukes innrykk.

Når du skal skille mellom avsnitt i aviser eller magasiner, er det vanlig å bruke kun ett linjeskift og så ha et innrykk istdenfor. Vanligvis er dette innrykket én gefirts lengde, altså lengden av en M i den skrifttypen du bruker. Sagt på en annen måte så skal innrykket være like stort som punktstørrelsen du bruker på skriften.

Avvik

Merk: Første avsnitt skal ikke rykkes inn. Også nye avsnitt etter mellomoverskrifter skal heller ikke rykkes inn.

Husk også at sitater vanligvis skal ha nye avsnitt, i alle fall meningssitater med replikkstrek.

Det er enn så lenge ikke vanlig å bruke innrykk innen webdesign. På nett skilles som regel avsnitt med en blank linje, men det går fint an å bruke innrykk der og.

Mellomoverskrift

Om du skriver en lengere artikkel, får du gjerne en del avsnitt som også er nært tilknyttet hverandre. Det kan også hende at du ønsker å rydde opp i artiklene ved å samle avsnitt under et felles tema for å friste leseren til å lese videre. I så fall kan du bruke mellomoverskrifter.

Merk: Det er vanlig å ha minst tre mellomoverskrifter. Som regel er det best å utelate mellomskrifter om du har færre enn det.

Tusenskille med InDesign

Posted in Design, Programvare, Typografi by kebman on 10/09/2012

I Norge bruker man hardt mellomrom for å gjøre store tall lettere å lese på trykk. Likevel er ikke det noe som skjer helt av seg selv i InDesign, derfor har jeg laget en liten tutorial om hvordan gå fra dette 1234567 til dette 1 234 567.

Må du sette mange store tall i InDesign har du plutselig et problem fordi det ikke finnes noen lett tilgjengelig automatisering for det. Er det bare ett og annet tall du skal sette, kan du sette markøren på tusenskillet, og trykke alt+cmd+X,2 så får du et hardt mellomrom der. Eller gå i menyen og til Type > Insert White Space > Nonbreaking Space. Men det blir fort upraktisk om du har veldig mange store tall i teksten din. Ikke går det an å lage en skikkelig GREP-stil for det heller.

Bruk søkefunksjonen

Likevel finnes det én utvei. Søkefunksjonen i InDesign er faktisk ganske god, og du kan fortsatt bruke GREP-koder i søkene dine. Trykk cmd+f for å få opp søkeskjemaet, eller bruk menyen og gå til Edit > Find/Change…

Besvergelsene

I søkeskjemaet må du velge fanen merket GREP, og så skriver du inn følgende besvergelser:

Under «Find»: (\d)(?=(\d\d\d)+\b)
Under «Change to»: $1~S

Forklaring

  • Besvergelsen «(\d)(?=(\d\d\d)+\b)» finner det som er mellom tusenskillet
  • «$1» er selve søket…
  • …og «~S» som henger på like etter står for Nonbreaking Space

Bruk @-symbolet til høyre for tekstfeltet for å legge inn det symbolet du trenger, for eksempel nonbreaking space med @ > White Space > Nonbreaking Space.

Hardt mellomrom gjør at tall og ord fortsatt henger sammen om de kommer så langt ut i en setning at de blir flyttet ned på en ny linje.
Cmd er kun på Mac, men vanligvis kan man bytte cmd med ctrl på PC.

Norske tegn med HTML

Posted in Design, Hobby, Internett, Scripting, Teknologi, Typografi, Webdesign by kebman on 02/07/2012

Mange har problemer med å få norske tegn og bokstaver første gangen de koder HTML. Med HTML5 er løsningen enklere enn noen gang.

Basiskoden for å få gyldig HTML5 ser slik ut:

<!DOCTYPE html>
<html>
<head>
	<title>Min tittel</title>
</head>
<body>
	<p>Min første hjemmeside.</p>
</body>
</html>

Kodetabell

Men fortsatt ser de norske bokstavene skikkelig rare ut når du åpner HTML-filen i en nettleser. Det kommer av et eldgammelt problem med datamaskinene; at de var laget kun for det engelske alfabetet. For å korrigere problemet, laget produsentene ekstra kodetabeller som også inneholdt europeiske tegn – deriblant vår egen æ, ø og å – men nettleserne tar bare høyde for disse om du fysisk angir riktig kodetabell med HTML-kode.

Du angir riktig kodetabell ved å legge inn følgende HTML-kode i hodet av HTML-dokumentet ditt:
<meta charset="utf-8" />

Hele HTML-koden vil da se slik ut:

<!DOCTYPE html>
<html>
<head>
	<title>Min tittel</title>
	<meta charset="utf-8" />
</head>
<body>
	<p>Min første hjemmeside.</p>
</body>
</html>

Her er kodetabellen UTF-8 fra Unicode brukt. Dette er den kodetabellen som har har de vanligste europeiske tegnene i seg, og derfor også den kodetabellen som er mest utbredt.

Feilsøking

Om norske tegn fortsatt vises feil er det stort sett en av to grunner til det:

  1. Det er ikke angitt noen kodetabell i HTML-koden, eller feil tabell er angitt.
  2. Filen er lagret med en annen kodetabell enn den du har satt i HTML-koden i tekstredigeringsprogrammet du har brukt.

Selv om du angir riktig kodetabell i HTML-koden, hjelper det ikke om du har lagret selve datafilen med feil kodetabell i redigeringsprogrammet. Noen redigeringsprogram har en fast kodetabell de bruker, men i de fleste programmene kan du angi hvilken kodetabell selve datafilen din skal lagres med. Pass på at det da at du har valgt UTF-8, eller Unicode (UTF-8) som tegnformat før du lagrer filen. Hvor du endrer det, er forskjellig fra hvilket program du bruker, men som regel finnes det i innstillingene.

I redigeringsprogrammet jeg bruker, TextWrangler, er det angitt på barren under tekstredigeringsvinduet, og det er bare å klikke på teksten, så kommer det en liste med alle kodetabellene jeg måtte ønske.

Tegnkoding i xHTML

Med xHTML er det litt mer plunder å få norske tegn.

For det første, trenges XML-versjon sammen med kodetabell helt øverst i dokumentet, før !DOCTYPE, slik:
<?xml version="1.0" encoding="UTF-8"?>

Og endelig må det velges riktig kodetabell for HTML-koden i hodet, slik:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

Norsk oppsett i InDesign

Posted in Design, Programvare, Typografi by kebman on 24/01/2012

Standardinnstillingene til InDesign er ikke norske, noe som gjør at hurtigtastene ikke fungerer slik de skal. Dette fører også til mange feil i dokumentene dine. Her er en kort innføring i hvordan du får norsk oppsett til InDesign CS5.

Start InDesign uten å åpne noen dokumenter.

1. i toppmenyen, gå til:
Edit > Keyboard Shortcuts > Set: [Default Norwegian]
Trykk OK

Bilde av meny

Denne sier seg litt selv, men nå kan du altså bruke Cmd + for å forstørre og Cmd – for å forminske.

2. i toppmenyen, gå til:
InDesign > Preferences > Dictionary
> Language: Norwegian
> Double Quotes: «»
Trykk OK

Veldig viktig, sidne vi bruker gåsøyner i Norge, og ikke engelske hermetegn. I tillegg påvirker språket hvilke regler som brukes for å dele ord riktig.

3. i toppmenyen, gå til:
InDesign > Preferences > Autocorrect
Language: Norwegian
Trykk OK

NB! Trenger importering av en norsk ordliste, men fortsatt verdt å gjøre.

3. i toppmenyen, gå til:
Layout > Margins and Colums
> Top, Bottom, Inside, Outside: 15 mm (15 + Tab)
> Gutter: 5 mm
Trykk OK

4. i toppmenyen, gå til:
Object > Text Frame Option
> Gutter: 5 mm

Generelt kan du sette flere innstillinger til hele tall, og dermed norske millimetermål, men dette kommer an på hva du vil oppnå og hvilke mål trykkeriet du skal sende dokumentene dine til bruker.

5. Sett Work Space til Advanced

6. trykk på Paragraph Styles for å få frem fane-boksen. Klikk på høyre hjørne i boksen for å få frem menyen. Velg så:
Style Options… > Advanced Character Formats
> Language: Norwegian
Trykk OK

Meny i fane

7. i toppmenyen, huk av:
Window > Application Frame

Dette gjør at du får en grå bakgrunn i programmet, og slik rydder opp bakgrunnen som fort blir ganske kaotisk uten dette.

Nå har du satt de fleste innstillingene du trenger for norsk oppsett globalt, slik at det vil være i effekt på alle nye dokumenter du oppretter. Merk at gamle dokumenter ofte vil ha lagret visse ting fra det gamle oppsettet, slik som engelsk orddeling, og det må du rette manuelt for hvert dokument.

NB! Denne guiden er hovedsaklig for Mac-brukere, men vanligvis brukes Cmd på Mac akkurat som Ctrl på PC.

Gåseøyne på nett

Posted in Teknologi, Typografi, Webdesign by kebman on 14/10/2011

Det er en del ting som skiller norsk typografi fra andre lands typografi, og spesielt engelsk og amerikansk typografi. Kanskje den viktigste tingen her er vår bruk av gåseøyne fremfor hermetegn. Likevel bruker folk flest hermetegn, men det er faktisk feil.

Grunnen til at hermetegnet («») kom i bruk, har nok med import av en og annen skrivemaskin å gjøre, og sist men ikke minst ignorant kulturimperialisme fra Microsoft. Skriveprogrammet deres, Word, skriver nemlig hermetegn som standard istedenfor gåseøyne («»).

Så, hvordan fikser vi dette på nett?

NB! Etterfølgende avsnitt er foreldet. Nå holder det å skrive inn riktig tegn, gitt at du har satt riktig kodetabell. Mer om det i tilleggsavsnitt nederst. Bare les mer om du er spesielt interessert i hvordan bruke det ikke anbefalte Q-elementet innen HTML.

Det finnes faktisk et eget HTML-element for setningssitater, det såkalt Q-elementet, men bruker du det uten CSS-design, vil du fortsatt få amerikanske hermetegn som standard.

Sånn funker det i HTML: Q-melk er bedre enn Tine melk.

Og slik blir resultatet, uten CSS-design: Q-melk er bedre enn Tine melk.

Du må kalle opp Q-elementet i CSS og bruke noen smarte pseudoklasser for at det skal bli korrekt, slik:

q:before {content: "«";}
q:after {content: "»";}

Så blir det endelig seende slik ut i nettleseren: «Q-melk er bedre enn Tine melk.»

Problemet er bare at dette ikke fungerer i eldre versjoner av Microsoft Explorer (MSIE eller bare IE), noe vi Mac-brukere selvfølgelig driter i. Heldigvis gjelder dette bare versjoner frem til IE7, og disse versjonene brukes bare av noen veldig få nå for tiden. Anyway, skulle du være spesielt interessert, så sjekk disse mulige løsningene:

Er du bare interessert i å få gåseøyne kjapt på Mac-en din, trykk shift+alt+V eller B.

Etter å ha gjort litt mer research, kan jeg ikke anbefale å bruke Q-elementet i det hele tatt. Grunnen er ganske enkelt at gåseøyne er helt spesifikke tegn, så å løse slik tegnsetting med en tagg er like dårlig som å bruke en escape-kode, slik som &laquo; og &raquo;. Istedenfor bruk riktig tegnkoding (eng: encoding) i din HTML. I HTML5 kan du for eksempel sette inn denne taggen i hodet <meta charset="utf-8" /> så kan du bruke både gåsøyne og æ, ø og å i teksten din helt uten problemer. I XHTML er det bittelitt mer jobb, men det lar seg også fint gjøre der.