 |
Autotext |
Obs!
Alla exempel öppnas i ett nytt fönster!
1. Inledning
Vi har nu hunnit fram till hur man skapar autotext, alltså sådan text som webbläsaren själv fyller i. Det kan vara sådant som vilka citationstecken som skall användas, vilka punkter en lista skall ha, osv.
Jag har framförallt hämtat informationen från kapitel 12 i CSS2-specifikationen.
Tanken bakom autotext är visserligen god, men alla som arbetat med de vanliga ordbehandlingsprogrammen, t.ex Word, vet hur jobbigt det kan vara med autotext. I Word fyller programmet ständigt i vad den tror är rätt och rättar "fel", som inte alls alltid är fel.
Autotext bör därför användas med största sparsamhet och försiktighet. Just styrningen av listor har förresten också en särskilt stor benägenhet att förstöra visningen av sidorna...
2. Kapitelrubriker
I specifikationens kapitel 12.5 finns ett exempel på hur man kan få webbläsaren att numrera kapitlen i en text. Om sanningen skall fram tycker jag att det är ett idiotiskt exempel, för normalt skriver man ju in kapitelnumreringen för hand. Men det kan ju vara intressant att studera, vilket vi skall göra nu.
Exemplet ser ut så här:
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter;
counter-reset: section;
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
Begriper du vad koden gör? Det ser svårare ut än vad det är!
Först hittar vi uttrycket before, som är ett pseudo-element och därför pekar ut en del av ett element, i det här fallet H1 och H2. Kommandot säger åt webbläsaren att leta upp och utgå ifrån det innehåll som föregick rubriken i dokumentet. Det är normalt BODY för H1, samt H1 för H2.
Nästa del är content, som är en ny egenskap, som förekommer ihop med olika pseudo-element och tillsammans med counter. Kommandot säger åt webbläsaren att skriva ut texten Chapter följt av en siffra, som den skall räkna ut. Webbläsaren måste alltså hålla reda på antalet förekomster av H1 för att få fram siffran för respektive kapitel.
Måste man välja just Chapter? Kan man inte ta Kapitel som namn i stället? Problemet är att jag inte kan utläsa detta i specifikationen. Eftersom stilmallen dessutom inte fungerar i någon av alla de webbläsare jag testat, vet jag faktiskt inte...
Sedan har vi counter-increment, som anger hur siffran skall öka (increase), nämligen med ett steg för varje kapitel. Counter-reset anger att webbläsaren skall återställa räkningen av underkapitlen i H2.
I H2 finns också en räknare som räknar antalet sektioner i ett kapitel. För varje nytt H2-element läggs ett värde till kapitlet, men kapitlets siffra förblir intakt.
Låter detta kryptiskt? Då måste vi titta på hur det ser ut i praktiken. Om vi skriver rubrikerna så här:
<H1>
<H2>
<H2>
<H1>
<H2>
kommer webbläsaren att skriva ut:
Chapter 1
Chapter 1.1
Chapter 1.2
Chapter 2
Chapter 2.1
Så här blir det i praktiken >>
3. Listor
Det finns ganska omfattande möjligheter att styra listor med stilmallar. Det går att bestämma hur de skall visas (som block eller inbäddade), vilken typ av punkter de skall ha, hur numreringen skall löpa, osv.
Det speciella med listor är att den består av flera olika boxar: dels den yta listan som helhet tar upp, dels den siffra eller punkt som föregår en post och dels den text som utgör innehållet i varje rad i listan.
Alla dessa boxar kan man styra på olika sätt. När jag skrev den här sidan i slutet av 90-talet fungerade det inte särskilt bra, men några år senare är det i alla fall bättre.
Inställningarna för stilmallen måste göras rigoröst och dokumentet måste testas noga i webbläsarna innan man kan vara säker på att listan inte ställer till problem.
I den följande texten visar jag därför bara några få exempel, som inte är särskilt svåra att använda. Du hittar mer information om listor i specifikationens kapitel 12.5. Jag har också skrivit mer om listor på en särskild sida. Gå dit >
Jag kommer här att fokusera på hur man visar olika slags siffror och numreringar, snarare än hur man får webbläsaren att sköta blandade, numrerade listor.
Som du vet från min sida om hur man gör listor i Html (läs mer om det här) kan man blanda listor på olika sätt. En numrerad lista innanför en annan nollställer alltid räkningen av den nya listan. Men man skulle i teorin även kunna fortsätta på samma lista med kommandot:
OL { counter-reset: none; }
Problemet med alla sådana funktioner är att de inte fungerar. Specifikationen är fylld med sådana tämligen värdelösa exempel.
I stället går vi över till hur man styr vilken typ av punkt eller numrering listan skall ha. Även här förekommer många och ganska krångliga exempel. Vi börjar med hur man skriver själva kommandot:
LI { list-style-type: listtyp }
Med listtyp avser jag den punkt eller siffra man vill att listan skall innehålla. Här är en sammanställning över de olika listtyper som finns, dvs vad man kan skriva i stället för listtyp ovan:
disc, circle, square är de vanligaste och styr sj'lvklart punkterna i punktlistor.
I numrerade listor används i stället decimal (1,2,3), decimal-leading-zero (01,02,03), lower-roman (i,ii,iii) och upper-roman (I,II,III).
Sedan fungerar även hebrew, armenian, georgian (an,ban,gan), cjk-ideographic, hiragana (a,i,u), katakana (A,I,U), hiragana-iroha (i,ro,ha), katakana-iroha (I,RO,HA).
Andra alternativ är lower-greek (alpha,beta,gamma), lower-alpha (a,b,c), upper-alpha (A,B,C), lower-latin (a,b,c), upper-latin (A,B,C)
Om du bara ser frågetecken, siffror eller inget tecken alls beror det på att din webbläsare inte förstår vad det är för tecken den skall visa.
Jag har för säkerhets skull använt mig av följande teckenkod:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xml:lang="sv" />
Läs mer om vad det är på sidorna om Konsiga tecken respektive Xhtml.
När man försöker styra numreringen med stilmallar måste man också ha klart för sig att man inte får ha för långa listor. Om antalet poster är fler än antalet bokstäver i ett alfabet, måste webbläsaren själv bestämma hur den skall göra. Detta går då inte att påverka med stilmallen.
Läs mer om hur man styr utseendet på listor på nästa sida. Gå dit >
Tack till Stefan Hermes för viktiga påpekanden och hjälp med denna sida!