Mitt projekt för Hackday4 blev att försöka skapa en design på nätet som så mycket som möjligt efterliknar en vanlig artikel i tidningen. Jag hade stött på en del nya grejer i CSS3 som borde göra det möjligt att på nätet närma sig en mer avancerad layout som mer liknar en vanligt tidningsartikel.

Jag började min hackday med att hämta ett alldeles färskt och härligt ex av Aftonbladet nere på redaktionen. Nu gällde det att välja ut en lagom svår artikel att försöka återskapa. Efter lite bläddrande bestämmer jag mig för att försöka återskapa dagens ledare. Artikeln har en lagom mix av text och bilder och en del spännande typsnitt som det vore kul att se på nätet.

Det var framförallt fyra nya moduler i CSS3 som jag direkt tänkte utforska och använda för att göra layouten.

CSS Fonts Module 
Multi-colum Layout Module
CSS Text
CSS Backgrounds and Borders Module

Med dess nyheter borde man komma långt.

CSS Fonts Module

Att använda externa typsnitt på en webbsida har varit en dröm sedan internets barndom och jag vet inte för hur många AD’s jag har fått förklara att Verdana nog är det enda tänkbara typsnittet för designen i ett projekt. Nu har vi vant oss vid detta så till den milda grad att det nästan ser konstigt ut med andra typsnitt, men nu är det slut med det. Med @font-face kan man hämta in vilka typsnitt och fonter man vill. Detta funkar i alla browser som stödjer CSS3 men den riktigt stora överraskningen är att detta funkar även på IE och har funkat där sedan IE4!!.

Nu gällde det att försöka identifiera alla typsnitt i den aktuella artikeln, jag pratade med min kollega Svante Westlin och han skickade mig vidare till Björn Sigrelius, enligt Svante, Aftonbladets nestor på typsnitt och tidningslayout. Jag visade artikeln för Björn och han lovade att innan lunch identifiera och skicka mig alla typsnitt som användes i artikeln. Det dröjde inte länge innan ett mail damp ner i min inkorg fullt med olika typsnitt i Postscript format.
Tack för hjälpen Björne!

Det stod snabbt ganska klar för mig att om jag skulle få detta att funka så var jag tvungen att konvertera dessa fonter från Postscript till True Type . En sökning på Google gav att för mac så är det Type Tool 3 som gäller om man vill meka med typsnitt, om man inte har råd med fontlab studio förståss.

Konverteringen gick smidigt och nu hade jag ett gäng med TTF filer som jag med hjälp av CSS3-direktivet @font-face skulle applicera på de olika delarna av artikeltexten.
Jag hittade då denna eminenta sida som automatiskt genererar crossbrowser kompatibel css-kod för detta ändamål.
Utifrån ttf-filen så skapar denna motor även typsnitt för IE (.eot) samt den css-kod man skall använda för att få det att funka.
Detta är mycket bra anser jag då det är mycket lätt att göra något fel om man skriver förhand. Man skall också komma ihåg att det faktiskt är ett litet css-hack ( load local hack  ) inblandat för att detta skall funka på sorgebarnet IE och andra browsers samtidigt.
Det kan också vara lite knepigt att testa detta med typsnitt i en webbsida och då kan det vara bra att från början kunna utesluta stavfel i koden och andra jobbiga inmatningsfel.

Så här ser koden ut man får från generatorn

@font-face {
    font-family: ‘AkzidenzGroteskAB’;
    src: url(‘AkzidGroABMag.eot’);
    src: local(‘AkzidenzGroteskAB’), local(‘AkzidenzGroteskAB-Mager’), url(‘AkzidGroABMag.woff’) format(‘woff’), url(‘AkzidGroABMag.ttf’) format(‘truetype’);
}

Nu är det bara att ändra sökvägarna till typsnittsfilerna, det kan också vara en ide att ändra namnen på de locala deklarationerna när man testar så att man verkligen är säker på att typsnitten kommer från filerna och inte från de typsnitt som är installerade i operativsystemet på den dator man testar på.

När jag väl hade installerat typsnitten och applicerat dem på rätt ställe i artikeltexten samt justerat graderna var det dax att ge sig på nästa steg i tidningslayouten.

Multi-colum Layout Module

Det har länga varit ett problem med att få en text att flyta i flera kolumner utan att man själv måste bestämma vart i texten kolumnerna skall börja och sluta. Detta har man löst i CSS3 med att införa modulen  Multi-colum Layout Module. I min artikel vill man använda denna på två ställen.

Detta funkar klockrent och det finns en hel del inställnings möjligheter och varianter man kan använda sig av, detta finns mycket bra beskrivet i boken ” Everything you know about css is wrong”  som jag verkligen kan rekommendera, min kod för huvudtexten ser dock ut som följer.

    -webkit-column-count:3;
    -webkit-column-gap:1.5em;
    -webkit-column-rule:1px solid #000;
   
    -moz-column-count:3;
    -moz-column-gap:1.5em;
    -moz-column-rule:1px solid #000;
   
    column-count:3;
    column-gap:1.5em;
    column-rule:1px solid #000;

Denna modul är ju ren CSS3 och funkar inte i någon variant av IE än. Man måste också direkt  adressera specifika browsers för att få det att funka både för mozilla och webkit, därför skriver jag samma kod tre gånger i detta exempel, först en gång för webkit ”-webkit” sedan en gång för mozillla ”-moz” och sedan den riktiga koden så som den skall se ut när css3 är implementerat på alla browsers.

Dingbats

I mailet från Björne ser jag att man i Aftonbladet (print), tro det eller ej, faktiskt använder sig av Dingbats för att skriva ut symboler och dylikt. För mig som aldrig har jobbat med print är detta helt främmande, jag har alltid betraktat dingbats som någon form av skämt, något som man kan låta barnen utforska och leka med medans man paratar i telefon eller sorterar räkningar. Men jag inser nu det geniala i detta.
Användandet av dingbats passar som handen i handsken för webben. Tänk att slippa alla miljoner giffar och sprites och i stället ha allt samlat i en typsnittsfil. Och när du vill ha en symbol eller ikon styr du färg storlek via css. Helt genialt, och funkar i alla browsers! Detta måste vi genast testa och implementera skarpt på AB, bloggen skulle passa bra, jag återkommer om detta.

Att konvertera dingbats-filerna till fungerande ttf-filer visa de sig vara lite knepigt. Jag löste det hela med att skapa en egen ny typsnittsfil  i TypeTool  3 och ta in de dingbats som behövdes för just denna artikel. Jag behöver nog läsa på mer om typsnitt och dingbats för att få dingbatsfilerna att funka rakt av.

Exempel på dingbats i artikeln

CSS Text

I denna modul har jag bara utforskat text-shadow men jag borde ta mig tid att utforska de lite mer avancerade grejerna som tex krening. Text-shadow funkar bra och kan bli grymt snygg om man använder det rätt, det kan verkligen lyfta en rubrik eller text. Som ni ser på bilden nedan så har hedern en liten skugga och den fixar man lätt med följande css-kod.
text-shadow: 1px 1px 1px #ecebeb;

Den två första siffrorna anger offset för skuggan och den tredje siffran anger hur mycket blur skuggan skall ha och till sist anger man skuggans färg.

CSS Backgrounds and Borders Module

Det fanns inget uppenbart ställe i artikeln där man kunde få användning för någon av nyheterna i Background and Borders modulen, men jag ville ändå prova border-radius på ett ställe där jag visste att jag skulle få problem om inte någon ny CSS3 funktion skulle rädda mig. Ta en titt på hur texten flyter runt bilden på Billström.

I HTML är bilder alltid rektangulära även om själva innehållet i bilden inte är det, i printvärlden verkar det inte vara så utan bilden har samma form som den beskriver, alltså flyter texten fint och oregelbundet. Denna effekt är helt omöjlig att uppnå i HTML …  så till vida man inte kan skära av hörnet på en div med border-radius och på så sätt simulera en bild som har en annan form än rektangulär, tänkte jag.

Efter en snabb check i Dreamweaver tvingas jag konstatera att det inte funkar, tyvärr, detta kunde ha blivet riktigt bra och mycket användbart. Här är koden för experimentet, lova att ni hör av er till mig om ni hittar någon lösning på detta problem. Jag får fixa detta på vanligt vis tillsvidare.

<style type=”text/css”>
<!–
.bill{background: transparent url(‘bill.jpg’) no-repeat scroll 0px 0px;width:125px;height:108px;float:left;border:1px solid #000;}
.bill{
-moz-border-radius-topright: 100px;
-webkit-border-radius-topright: 100px;
border-radius-topright: 100px;

-moz-border-top-right-radius: 100px;
-webkit-border-top-right-radius: 100px;
border-top-right-radius: 100px;
}

.text{}
.wrapper{width:400px;}
–>
</style>

……

<div class=”wrapper”>
<div class=”bill”></div>
<span class=”text”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mauris ac mauris aliquet venenatis quis vel nibh. In volutpat varius nulla, vitae iaculis velit gravida vel. Nullam purus sem, fringilla a commodo sed, tincidunt eget nulla. Cras massa dui, condimentum a aliquam et, varius sit amet nisl. Donec porttitor mi quam, vitae varius neque. Pellentesque quam felis, tincidunt sit  </span>
<div style=”clear:both;”></div>
</div>

Resultatet

Här kan ni se det färdiga resultatet. Sidan är utklipp från Firefox3.6 och jämförs med en jpg genererad från aftonbladets pdf.

Artikeln ovan från Firefox 3.6 MacOSx

Artikeln ovan från Aftonbladets PDF

Jag är nöjd med resultatet i stort, dom stora fonterna renderar nästan perfekt, men man kan se att dom små fonterna i brödtexten inte håller för läsning i nuvarande grad. Dom renderar inte häller likadant som i pdf-dokumentet antagligen beroende på att de är så små.
Det finns några återgärder som man skulle kunna vidta för att komma runt detta, det första är att man gör hela sidan större och på så sätt skalar upp hela artikeln.
Man skulle också kunna använda ett annat typsnitt för de små fonterna ett typsnitt som är mer anpassat för små grader.
En tredje variant är att man helt enkelt anger större grader för brödtext små rubrikerna mm. Jag skall fundera ett tag och återkomma med en variant av artikeln där läsbarheten är prioriterad.

Multi-colum layouten funkar dock väldigt bra även om det är lite knepigt att få texten att bryta exakt som i pdfen men det hade man kanske inte väntat sig.

Hackday4

Hackday var som vanligt mycket kul och intensivt och man ser redan fram emot femman.

 

Trots hackdays hårda tempo och höga prestationskrav hann vi som vanligt med en lunchpingis som, om jag inte minns fel vanns av undertecknad. Foto:  Daniel Kozlowski.

/Lukas Hansson