Yleistä

Kuten sivulla Mikä on HTML ja XML asiakirjojen perusrakenne tuli esille, fontin määrittely on CSS:n kanssa yhteensopivuuden näkökulmasta ongelmallinen. Perusnäkökulma on se, että mitä enemmän halutaan helposti ja joustavasti toteutettavia CSS-määrittelyjä, sitä vähemmän dokumentit ovat ulkonäön suhteen HTML 3.2 yhteensopivia.

Mikäli halutaan mahdollisimman suuri alaspäin yhteensopivuus, tulee käyttää elementtiä FONT, vaikka CSS spesifikaatio ei sitä mainitse kuin ohimennen. Kun annat kuvauksen luokalle font-style1, voit jälkikäteen määritellä fontin ominaisuudet uusiksi, mutta vanhemmat selaimet näyttävät HTML 3.2 tasoiset vaihtoehtoiset attribuutit. Tee seuraavan tapainen määrittely dokumentin runko-osaan ( - mallisivulla on kaikki tämän jakson mallit):

<FONT class="font-style1" face="Arial" color="#3f3f3f">

Tällainen on kuitenkin aika vaivalloista ja HTML 3.2 attribuutit ovat aika vaatimattomia verrattuna CSS-ominaisuuksiin. Et koskaan saavuta kovin suurta alaspäin yhteensopivuutta. Tavallaan jonkinasteinen alaspäin yhteensopivuus toteuttaa CSS-mediapäämääriä - eri laitteille voidaan tarjota yksilöllisiä sivuja.

Tosin attribuuttivalitsimia käyttäen CSS luokka- tai id-valitsimia ei tarvita lainkaan vaan ominaisuuksien sovitussäännöissä voidaan hyödyntää olemassa olevia attribuutteja. Alla on kaksi esimerkkiä elementin FONT värin muutostavoista attribuuttivalitsinten avulla ():

font[color="#660033"]{color:blue} /* elementti FONT, jolla on attribuuttina color="#660033", saavat värin blue - muista välilyöntisääntö; jos laitat välilyönnin elementtityypin perään, säännössä sanotaan: fontti-elementti, jonka perässä on elementti, jolla on attribuutti color="#660033" saavat värin blue */
*[color="#660033"]{color:blue} /* värin muutoksen voi esittää myös yleisesti; tässä sanotaan vain, että mikä tahansa elementti, jolla on attribuuttina color="#660033", saavat värin blue */

Erityisesti otsikoissa voi käyttää hyvinkin monenlaisia ominaisuuksia. Olen seuraavaan esimerkkiin koonnut suuren joukon ominaisuuksia ja mainitsen, mitkä niistä kuuluvat vain CSS2:een ():

h2
{color: #660033; /* tekstin väri ns. keyword-arvona */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* miten paksua fonttia käytetään - tässä ns. keyword-arvona */
font-size: 18pt; /* absoluuttisella yksiköllä määritelty fonttikoko */
font-style:oblique; /* standardin mukaan tekee normaali fontin tietokoneella viistoksi (slant) - melkein sama kuin italic (oletuksena normal) */
font-variant:small-caps; /* kaikki kirjaimet ovat isoja kirjaimia, mutta pienet kirjaimet näytetään vähän matalampina */
text-transform:capitalize; /* hieman edellisen kaltainen - sanan ensimmäinen kirjain on aina iso kirjain (muut arvot ovat lowercase ja uppercase); huomaa, että lowercase (pienet kirjaimet) kumoaa edellisen määrittelyn */
text-decoration: overline; /* muut mahdolliset arvot: none, underline, line-through, blink; ominaisuus ei automaattisesti periydy */ font-stretch:wider; /* em. arvon pitäisi leventää fonttityyppiä (CSS2) */
text-shadow: 5px 5px red; /* tekstin varjostus (CSS2) */ }

Fonttimääreiden kohdalla huomionarvoista on font-weight. Periaatteessa fonttiperheeseen voi kuulua yhdeksän eri fontinpaksuutta ja ne merkitään 100-900 (esim. font-weight:600). Millään tuntemallani fontilla näin ei ole kuitenkaan asianlaita ja mikä arvo puuttuu otetaan lähin sopiva arvo (lisäksi on huomattava, että normal=400 ja bold=700). Väliaikaiseen koon muuttamiseen voi käyttää myös avainsanoja lighter ja bolder, joita en suosittele perusmääreiksi.

Fontin ominaisuudet voidaan määritellä myös ns. pikakirjoitteena, jossa mukana on myös line-height ominaisuus ():

... {font: normal small-caps 120%/120% fantasy;} /* malli fontin pikakirjoitemäärittelystä; ensimmäinen prosenttiluku tarkoittaa fontin korkeutta ja toinen rivikorkeutta (line-height ominaisuus voidaan määrittää muista vastaavan kaltaisista ominaisuuksista poiketen ilman mittayksikköä: 1.2 = 1.2em); erillismäärittelyjä on kuitenkin mielestäni tässä tapauksessa helpompi hallita */

Alla on W3C organisaation spesifikaation pohjalta muokattu esimerkki:

@media print {/* toimii ainakin MS IE 5.x, uusilla Netscape/ Mozilla ja Opera4.+ selaimilla */
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt }
}
@media screen, print {/* muut mahdolliset mediatyypit: aural, braille, embossed, handheld, projection, tty, tv - huomaa, että laitteen täytyy tunnistaa itsensä eli tietyt laitteet tarvitsevat erityisselaimen eikä toimivuutta voi testata ennen kuin kyseinen selain on valmistettu! */
body {line-height: 1.2}
} /* huomaa, että kaarisulut ympäröivät tavanomaiset määrittelyt */

W3C: CSS2: 7 Media types; 7.2.1 The @media rule.

Kun mediasääntö liitetään samaan tyylisivuin, sääntöjen merkitystasoja kuvaa jo aiemmin käyttämäni kaavio, johon olen lisännyt yhden tason (mediasääntölohko voi sisältää useita sääntöjä aivan kuten kuvauslohko voi sisältää useita kuvauksia):

Edellä olleessa kaaviossa print on ns. mediatyyppi (media type). Mediatyyppitiedon voi liittää myös STYLE tai LINK-elementteihin (<LINK rel="stylesheet" type="text/css" media="print">) ja @import -sääntöön (esim. @import url(printti.css) print; - tämä tiedosto haetaan vain tulostettaessa).

Mediaryhmät

Normaali näyttöesitysmedia, kuten eräät muutkin mediatyypit ovat ns. jatkuvaa media (continous media). Mediatyypit print ja projection ovat osa CSS2:n sivutettua mediaa (paged media), joka on yksi mediaryhmä (media group).

Sivutetussa tulostus- ja näyttömediassa pyritään hallitsemaan sivutkatkot.

Tavanomainen paperitulostus, normaali näyttöesistys ja projektioesitys ovat kaikki osa visuaalista muotoilumallia (visual formatting model). CSS2:n kuuluu myös ei-visuaalisia muotoilumalleja (formatting models) ja erityismedioita näkövammaisia varten, joita ovat kuulomuotoilumalli (aural rendering model) ja kosketeltava media tactile media).

Lisäksi on otettava huomioon esityslaitteen ominaisuudet, joihin kuuluu mm. se, voiko käyttää lainkaan grafiikkaa. tai voiko käyttäjä vaikuttaa esityksen lopputulokseen vai ei.

Seuraava lista esittelee mediaryhmät, muotoilumallit sekä niihin liittyvät mediatyypit, mikäli niitä on vain yksi tai kaksi:

• Visuaalinen muotoilumalli
• Kuulomuotoilumalli - mediatyyppi aural
• Kosketeltava media - mediatyypit braille ja emboss
• Sivutettu media - jatkuva media (kyse on siitä, että käytetäänkö sivunkatkosääntöjä vai ei)
• Interaktiivinen media - staattinen media (interactive - static; voiko käyttäjä muuttaa sivun esitysasua vai ei)
• Kehikko - rasteri (grid - bitmap; edellisessä näyttö käyttää ns. kiinteävälistä kirjasinkehikkoa (fixed-pitch character grid), joka ei tue grafiikkaa; jälkimmäisessä näyttö toimii rasterina, jolloin voidaan käyttää myös suhteutettuja merkkejä ja esittää grafiikkaa)

Muotoilumallien, mediatyyppien ja -ryhmien välistä suhdetta kuvaa W3C spesifikaatiosta lainattu taulukko (kohta ei sovellu, merkitään englanniksi N/A (= not applicable), joka merkitsee sitä, että kyseistä vaihtoehtoa ei voi soveltaa tiettyyn tilanteeseen; ks. mediatyyppien suomennosehdotuksia:

Fonttityyppien at-sääntö

Eri visuaalisten esitystapojen tueksi on myös mahdollista ladata fontteja @font-face säännön avulla. Seuraavassa kuitenkin yksi W3C sivuilta ottamani esimerkki:

@font-face {
src: local("Helvetica Medium"), /* selain yrittää ensin etsiä asennetun fontin */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* mikä selain ei löydä sellaista, se lataa fontin; mikäli ladattua fonttia ei löydy käytetään vaihtoehtoista fonttia */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face.

Koska nimelliskooltaan samankokoinen fontti saattaa näyttää kovinkin erikokoiselta, CSS2 tuo laskentakaavoja (font matching algorithm), joilla korvaavien fonttien koko tuottaisi mahdollisimman samankaltaisen lopputuloksen (font-size-adjust).

W3C: CSS2: 15 Fonts, 15.2.4 Font size, 15.5 Font matching algorithm.
Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.

Kansainvälisyys

Käyttäjän huomioimista on myös hänen kielensä mukaisesti tehdyt sivut. Tätä pyrkimystä kutsutaan W3C piirissä termillä internationalization (se lyhennetään usein muotoon i18n). On mahdollista luoda samaan dokumenttiin oikealta ja vasemmalta kirjoitettavaa tekstiä (kuten esim. hepreaa) käyttämällä ominaisuutta direction, jota käsitellään spesifikaation luvussa 9. Tämä on kuitenkin itselleni äärimmäisen harvoin tarvittava piirre enkä ole sitä testannut.

Muut i18n piirteet käsitellään CSS2 spesifikaation luvussa 12. Siinä tuodaan esille, että on mahdollista tehdä kielikohtaisia sitaatteja käyttäen elementtiä Q (= quote = sitaatti. Myös erityisten listatyyppien käyttö on mahdollista (käsittelen listoja omalla sivulla).

W3C: CSS2: 9 Visual formatting model, 9.10 Text direction: the 'direction' and 'unicode-bidi' properties, 12 Generated content, automatic numbering, and lists .