Koodit: CSS: Omat luettelomerkit

Suomen kielessä on luetelmamerkkeinä vanhastaan käytetty lyhyttä ajatusviivaa, ns. n-viivaa. Numeroiduissa luetelmissa pitäisi käyttää numeron jälkeen oikeaa suljetta, ei pistettä. CSS:n list-style-ominaisuus ei kuitenkaan oletuksena mahdollista näiden merkkien käyttöä.

Tässä koodivinkissä esitellään kaksi tapaa, joista ensimmäinen on parempi mutta selaintuki kehno: vain Firefox 33 ja sitä uudemmat versiot.

Oma laskurityyli

Paras ratkaisu on luoda oma laskurityyli, joka otetaan käyttöön list-type-ominaisuudella:

@counter-style luetelmamerkki {
	system: cyclic;
	symbols: –; /* n-viiva */
	suffix: "  ";
}

ul {
	list-style: luetelmamerkki;
}

@counter-style luetelma-nro {
	system: extends decimal;
	suffix: ")  ";
}

ol {
	list-style: luetelma-nro;
}

Järjestettyä luetteloa varten luodaan laskurityyli luetelmamerkki ja järjestelemätöntä varten luetelma-nro.

System-ominaisuus määrittää, mihin järjestelmään laskurityyli perustuu. Cyclic tarkoittaa, että symbols-ominaisuudella lueteltuja merkkejä toistetaan vuoron perään ja merkkien loputtua kierros alkaa alusta. Tässä sama merkki toistuu kokoajan, sillä merkkejä on määritelty vain yksi.

Suffix määrittää joka kohdan perään lisättävän jälkiliitteen.

Extends tarkoittaa, että oma laskurityyli laajentaa annettua laskurityyliä. Tässä tapauksessa laajennetaan laskurityyliä decimal [1, 2, 3, …] lisäämällä jälkiliite ”) ”, jolloin tuloksena on [”1) ”, ”2) ”, ”3) ”, …].

Lisää mukautetuista laskureista

» Katso demo

Järjestelemättömän luetelman luettelomerkin voi vaihtaa myös yksinkertaisemmin, ilman omaa laskuria:

ul {
	list-style: symbols(cyclic "– "); /* n-viiva */
}

Laajempi selaintuki

Tässä ratkaisussa luettelomerkit poistetaan ja niiden tilalle luodaan uudet ::after-pseudoelementtien avulla. HTML:ään ei tarvita lisämerkintöjä.

ul {
	list-style-type: none;
}
ul li:before {
	content: "–"; /* n-viiva */
	width: 1em;
	margin-left: -1em;
	display: inline-block;
}

ol {
	list-style-type: none;
	padding-left: 1.1em;
	counter-reset: luetelmalaskuri;
}
ol li {
	display: table-row;
}
ol li::before {
	content: counter(luetelmalaskuri) ")";
	counter-increment: luetelmalaskuri;
	text-align: right;
	padding-right: 0.5em;
	display: table-cell;
}

Koodissa on otettu huomioon tilanne, jossa luetelmakohdan teksti jakautuu useammalle riville. Tällöin uusi rivi alkaa samasta kohdasta kuin ensimmäinen. Siksi koodissa käytetään display-ominaisuuden arvoja table-row ja table-cell.

Numerointi saadaan aikaan CSS:n laskureilla. Jos halutaan käyttää kirjaimia numeroiden sijaan, asetetaan counter()-funktion toiseksi parametriksi lower-alpha.

» Katso demo