Artikkelin loppumerkki CSS:lla

15.12.2004 klo 13.59 • Aihe: Web

Olen miettinyt miten toteuttaa paperilehdissä yleisesti käytössä oleva tyylillinen yksityiskohta CSS:lla: artikkelin loppumista osoittava pieni merkki tai kuva. Joskus kuva on tasattu palstan oikeaan reunaan, joskus se on heti tekstin perässä. Yhtä "parasta" toteutustapaa en keksinyt, kaikissa on omat ongelmansa.

Menetelmä 1 (CSS3)

Kuva on viimeisen tekstirivin oikeassa reunassa, tasattuna palstan oikeaan reunaan. Merkin tarkempaa paikkaa voi säädellä lisäämällä kuvatiedoston oikeaan ja alareunaan sopivan leveän läpinäkyvän osan, ja vaakasuunnassa myös CSS:n background-ominaisuudella, jos tekstikappaleen leveys on kiinteä.

#loppum1 p:last-child {
background: url(loppumerkki.gif) right bottom no-repeat;
}

Ongelmat: Teksti saattaa viimeisellä rivillä mennä osin kuvan päälle. Kuvaa ei saa heti tekstin perään.
Toimii: Mozilla & Firefox.

Menetelmä 2 (CSS)

Sama kuin menetelmä 1, paisti että viimeiselle kappaleelle on annettu oma yksilöllinen luokkansa (class="viimeinen").

#loppum2 p.viimeinen {
background: url(loppumerkki.gif) right bottom no-repeat;
}

Ongelmat: Teksti saattaa viimeisellä rivillä mennä osin kuvan päälle. Viimeiselle kappaleelle antaa määrittää oma luokkansa (mikä voi tietää paljonkin lisätyötä). Kuvaa ei saa heti tekstin perään.
Toimii: kaikki uudemmat selaimet.

Menetelmä 3 (CSS3)

Kuva on viimeisellä tekstirivillä heti tekstin perässä. Sen etäisyyttä tekstistä vaakasuunnassa voi säädellä marginaalin leveydellä. Pystysuuntainen säätely täytyy tehdä muokkaamalla kuvatiedostoa (ks. ed.).

#loppum3 p:last-child:after {
content: url(loppumerkki.gif);
margin-left: 8px;
text-align: right;
}

Ongelmat: Kuvaa ei voine tasata oikeaan reunaan.
Toimii: Mozilla & Firefox.

Menetelmä 4 (img ja CSS)

Kuva liitetään sivulle img-tagilla ja tarvittaessa kellutetaan se oikealle CSS:lla. Sen tarkempaa paikkaa voi säädellä CSS-marginaaleilla.

#loppum4 .loppumerkki {
float: right;
margin-top: -1.3em;
}

Ongelmat: Kuvaa ei voi täysin hallita CSS:lla. Kellutusta käytettäessä teksti saattaa viimeisellä rivillä mennä osin kuvan päälle.
Toimii: kaikki uudemmat selaimet.

Lisäksi kuvan voisi yrittää sijoittaa myös span-tageilla ja CSS:lla anfangi-esimerkin tyyliin. Ylimääräisten span-elementtien takia etua menetelmään 4 verrattuna ei kuitenkaan olisi.

Ruudunlukuohjelmia varten kuvaan voisi liittää tekstiä (esim. "artikkeli loppui"), img-tagiin alt-attribuutilla ja muissa CSS2:n content-ominaisuudella. Tilanteesta riippuu mikä toteutustapa on paras (tai onko merkki ylipäätään tarpeellinen). Olisiko vielä muitakin tapoja?

Kommentit

Tätä viestiä ei voi enää kommentoida.