Discussion:
CSS ja drop caps
(too old to reply)
Otto J. Makela
2009-09-29 12:58:02 UTC
Permalink
Yrittäessäni laajentaa ymmärrystäni hieman CSS suuntaan ajattelin
kokeilla tehdä tekstiin paperitypografiassa melko tavallisen drop
capsin, eli tekstin ensimmäisen kappaleen ensimmäinen kirjain olisi
automaattisesti "iso".

Sekä oman pähkäilyni että valmiin esimerkin seuraamisen kautta päädyin
tällaiseen minimalistiseen CSS 3.0 -ratkaisuun:

p:first-child:first-letter {
float: left;
font-size: 300%;
}

Tämä ei ainakaan nyt tuntuisi toimivan Firefox 3.0.14 kanssa,
vaikuttaa siltä ettei first-child koskaan osu kohdalleen: jos käytän
vain p::first-letter jokaiseen kappaleeseen tulee drop cap, sen sijaan
p:first-child ei tunnu vaikuttavan ensimmäisen kappaleen muotoiluun.

Error consolelle ei ilmaannu mitään virheitä, ja ainakin Quirksmoden
CSS-testi väittää että kyllä Firefoxin pitäisi osata.

Mikäs tässä nyt oikein meni pieleen, onko olettamukseni siitä mihin
p:first-child osuu jotenkin virheellinen?

http://www.otto.net/test.html

http://www.w3.org/TR/css3-selectors/
http://tinsology.net/2009/06/css-drop-cap-effect/
http://www.quirksmode.org/css/contents.html
--
/* * * Otto J. Makela <***@iki.fi> * * * * * * * * * * * * * * * */
/* Phone: +358 40 765 5772, FAX: +358 42 7655772, ICBM: 60N 25E */
/* Mail: Mechelininkatu 26 B 27, FI-00100 Helsinki, FINLAND */
/* * * Computers Rule 01001111 01001011 * * * * * * * * * * * * */
Osmo Saarikumpu
2009-09-29 15:24:48 UTC
Permalink
Post by Otto J. Makela
p:first-child:first-letter {
float: left;
font-size: 300%;
}
Tämä ei ainakaan nyt tuntuisi toimivan Firefox 3.0.14 kanssa,
Johtuu siitä ettei ensimmäinen tekstikappaleesi ole first-child. Eli
testisivullasi first-child on:

<h1>Test</h1>

Poista hetkeksi otsikko niin ensimmäisestä kappaleesta tulee first-child.
Post by Otto J. Makela
p:first-child ei tunnu vaikuttavan ensimmäisen kappaleen muotoiluun.
Lykkää tuo 1. kappale vaikka DIVin lapseksi niin siitä silloin tulee
tuon DIVin eka lapsukainen.
--
Yst. terv. Osmo
Otto J. Makela
2009-09-29 15:37:51 UTC
Permalink
Post by Osmo Saarikumpu
Post by Otto J. Makela
p:first-child:first-letter {
float: left;
font-size: 300%;
}
Tämä ei ainakaan nyt tuntuisi toimivan Firefox 3.0.14 kanssa,
Johtuu siitä ettei ensimmäinen tekstikappaleesi ole first-child. Eli
<h1>Test</h1>
Poista hetkeksi otsikko niin ensimmäisestä kappaleesta tulee first-child.
Post by Otto J. Makela
p:first-child ei tunnu vaikuttavan ensimmäisen kappaleen muotoiluun.
Lykkää tuo 1. kappale vaikka DIVin lapseksi niin siitä silloin tulee
tuon DIVin eka lapsukainen.
Nonniin, kuvittelin että p:first-child tarkoittaa ensimmäistä <p>-lasta...
Mikähän tällaiseen yleiseen ongelmaan olisi järkevä ratkaisu?
--
/* * * Otto J. Makela <***@iki.fi> * * * * * * * * * * * * * * * */
/* Phone: +358 40 765 5772, FAX: +358 42 7655772, ICBM: 60N 25E */
/* Mail: Mechelininkatu 26 B 27, FI-00100 Helsinki, FINLAND */
/* * * Computers Rule 01001111 01001011 * * * * * * * * * * * * */
Otto J. Makela
2009-09-29 20:20:17 UTC
Permalink
Post by Otto J. Makela
Nonniin, kuvittelin että p:first-child tarkoittaa ensimmäistä <p>-lasta...
Mikähän tällaiseen yleiseen ongelmaan olisi järkevä ratkaisu?
Pieni jatkokokeilu osoitti että

p:first-of-type:first-letter {
float: left;
font-size: 300%;
}

tuottaa odotetun tuloksen. Eihän tällainen tietenkään typografisesti
mitenkään korrekti ole, mutta sainpa periaatteen toimimaan.
--
/* * * Otto J. Makela <***@iki.fi> * * * * * * * * * * * * * * * */
/* Phone: +358 40 765 5772, FAX: +358 42 7655772, ICBM: 60N 25E */
/* Mail: Mechelininkatu 26 B 27, FI-00100 Helsinki, FINLAND */
/* * * Computers Rule 01001111 01001011 * * * * * * * * * * * * */
Jukka K. Korpela
2009-09-29 21:02:32 UTC
Permalink
Post by Otto J. Makela
Pieni jatkokokeilu osoitti että
p:first-of-type:first-letter {
float: left;
font-size: 300%;
}
tuottaa odotetun tuloksen.
Muutamissa selaimissa. Pseudoluokka :first-of-type ei kuulu mihinkään
vahvistettuun tai edes ehdotustasoiseen CSS:n määrittelyyn, joten
mahdollinen selaintuki on määritelmän mukaan eksperimentaalista.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Osmo Saarikumpu
2009-09-30 14:30:02 UTC
Permalink
Post by Jukka K. Korpela
Muutamissa selaimissa. Pseudoluokka :first-of-type ei kuulu mihinkään
vahvistettuun tai edes ehdotustasoiseen CSS:n määrittelyyn, joten
mahdollinen selaintuki on määritelmän mukaan eksperimentaalista.
Selectors Level 3:sta löytyy (mikäli ehdotustasoisella tarkoitat samaa
kuin working draft):

http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo
--
Yst. terv. Osmo
Jukka K. Korpela
2009-09-30 16:30:34 UTC
Permalink
Post by Osmo Saarikumpu
Post by Jukka K. Korpela
Muutamissa selaimissa. Pseudoluokka :first-of-type ei kuulu mihinkään
vahvistettuun tai edes ehdotustasoiseen CSS:n määrittelyyn, joten
mahdollinen selaintuki on määritelmän mukaan eksperimentaalista.
Selectors Level 3:sta löytyy (mikäli ehdotustasoisella tarkoitat samaa
Ehdotustasoinen tarkoittaa Proposed Recommendation, mitä muuta?

Working draft on työluonnos, joka W3C:n yhteydessä tyypillisesti tarkoittaa
raakiletta, joka ei ole edes kokonainen luonnos vaan jonne on sekaan
kirjoitettu kysymyksiä ja kommentteja, jotka osoittavat, että joistakin
kohdista ei ole päästy edes työryhmässä konsensukseen.
Post by Osmo Saarikumpu
http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo
Dokumentin aika alussa sanotaan:
"This is a draft document and may be updated, replaced or obsoleted by other
documents at any time. It is inappropriate to cite this document as other
than work in progress."
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Osmo Saarikumpu
2009-10-01 05:47:41 UTC
Permalink
Post by Otto J. Makela
Nonniin, kuvittelin että p:first-child tarkoittaa ensimmäistä <p>-lasta...
Tuli vielä mieleen, että tällaisiin selektorilukivirheisiin saattaa olla
apua selektorioraakkelista¹ joka tässä tapauksessa julistaisi:

p:first-child == 'Selects any p element that is a first child.';

ja sama (ehkä) muutamalla muullakin kielellä.

Yst. terv. Osmo

¹ http://gallery.theopalgroup.com/selectoracle/

pauli0212
2009-09-29 15:51:29 UTC
Permalink
Post by Osmo Saarikumpu
Lykkää tuo 1. kappale vaikka DIVin lapseksi niin siitä silloin tulee
tuon DIVin eka lapsukainen.
Ei tunnu toimivan ainakaan IE6:ssa. Ilmeisesti IE6 ei tunne koko first-
child määrittelyä.

Yksinkertaisempi tapa, joka toimii myös IE6:ssa, on se, että teet sen
tyylimäärittelyn jollekin luokalle. Sitten vain laitat kyseisen luokan
siihen kappaleeseen, johon haluat anfangin. Silloin ei myöskään
tarvita ylimääräistä diviä.

--
Pauli
Osmo Saarikumpu
2009-09-29 16:55:48 UTC
Permalink
Post by pauli0212
Ei tunnu toimivan ainakaan IE6:ssa. Ilmeisesti IE6 ei tunne koko first-
child määrittelyä.
Ei tunne, tai ei ainakaan tue. Ymmärsin ettei Otto ollut
kiinnostunutkaan muusta kuin FF3:sta, joka käsittääkseni on ainoa
(ainakin joukosta FF1-3, IE6-8, Opera 9, Konqueror 3.5 ja Safari 2) joka
hanskaa tuon ilman bugeja.
Post by pauli0212
Yksinkertaisempi tapa, joka toimii myös IE6:ssa, on se, että teet sen
tyylimäärittelyn jollekin luokalle. Sitten vain laitat kyseisen luokan
siihen kappaleeseen, johon haluat anfangin. Silloin ei myöskään
tarvita ylimääräistä diviä.
Tuo ei kuulosta kovin selkeältä. En ymmärrä mitä luokilla on asian
kanssa tekemistä? Enkä ainakaan näin äkkiseltä näe miten tuossa
selvittäisiin ilman ylimääräistä elementtiä. Olisiko selventävää koodia?
--
Yst. terv. Osmo
Jukka K. Korpela
2009-09-29 19:14:13 UTC
Permalink
Post by Osmo Saarikumpu
En ymmärrä mitä luokilla on asian
kanssa tekemistä? Enkä ainakaan näin äkkiseltä näe miten tuossa
selvittäisiin ilman ylimääräistä elementtiä. Olisiko selventävää koodia?
Luokilla on asian kanssa tekemistä sikäli, että niillä homma saadaan
toimimaan myös selaimissa (ja selainten tiloissa), jotka eivät tue
:first-child-elementtiä. Esim. näin:

p.alku:first-letter {
float: left;
font-size: 300%;
}

Anfangit ovat kyllä muissa suhteissa ongelmallisia. Esimerkiksi yllä oleva
tyyliohje luo typografisesti oudon anfangin, joka lilluu jossakin vasemmalla
niin, että sen yllä ja alla on aika lailla tilaa. Tilanne vaatii käsisäätöä,
etenkin line-height-ominaisuuden asettamista sopivaan arvoon (jonka täytyy
riippua konkreettisen kirjaimen ominaisuuksista).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Loading...