font-variant i text-transorm w stylach

[robaszek]

Otóż chciałem sobie w zewnętrznym arkuszu stylów nadać selektorowi a:hover cechy: text decoration: underline overline, text-transform: lowercase i font-variant: small-caps (color: blue dodałem później, by sprawdzić, czy wszystko działa). Oto jak wygląda kod:

Kod: Zaznacz cały

a:hover
{
text-decoration: underline overline;
text-transform: lowercase;
font-variant: small-caps;
color: blue
}

I sprawa ma się następująco: po najechaniu na link podkreśla się on i nadkreśla, zmienia kolor na niebieski, litery zmieniają się w nim na 'kapitaliki', ale nie zmieniają się wszystkie na małe. Zmieniają się na małe tylko, kiedy wyrzucę linijkę text-variant: small-caps. Natomiast kiedy z całego kodu wyrzucę tylko linijkę text-transform: lowercase, to z kolei literki nie zmieniają mi się na 'kapitaliki' (mimo, iż w kodzie mam linijkę text-variant: small-caps!). Oczywiście w każdym przypadku sprawdzałem, czy zapis jest poprawny (literówki, średniki itd.). Czy ktoś wie, dlaczego nie mogę mieć font-variant: small-caps i text-transform: lowercase w jednym selektorze? Ani czemu nie mogę mieć font-variant: small-caps kiedy nie mam linijki text-transform: lowercase?

Proszę o odp. i pozdrawiam

[viraptor]

Bo tak naprawde, to small-caps zmienia litery na duże, ale zmienia ich rozmiary.
Note: insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.
Tak więc masz albo małe litery, albo duże. Ew. możesz sam zmienić odpowiednio text-weight, letter-spacing, font-size i inne bajery, żeby wyglądało jak przy small-capsie.

[robaszek]

Tylko że kiedy zrobię samo small-caps, to tekst napisany z wielkiej litery jest i tak większy od małej (ale wszystkie są drukowane). Nie można łączyć small-caps i lowercase?

No i - nawet jeśli nie można ich łączyć - dlaczego kiedy mam samo small-caps, np.

Kod: Zaznacz cały

a:hover
{
text-decoration: underline overline;
font-variant: small-caps
}

kapitaliki mi nie działają? Działają tylko wtedy, gdy dodam - niedziałającą - linijkę z lowercase.

To jakaś zła siła.

Pozdrawiam

[viraptor]

Skoro chcesz mieć *wszystkie* litery takie same w hoverze, to czemu nie użyjesz po prostu text-transform: uppercase? Z tego co czytam, jeśli dobrze rozumiem, to właśnie o taki efekt ci chodzi.
A small-caps nie zadziała z lower case, ponieważ wzajemnie się wykluczają. small-caps tobi uppercase dla wszystkich liter, a potem zmniejsza rozmiar tych, które były wcześniej małe.

[robaszek]

Chcę mieć:

- litery drukowane o wielkości małych liter (no czyli 'kapitaliki')

- wszystkie litery równej wysokości.

small-caps tobi uppercase dla wszystkich liter

Myślę, że się mylisz. Przykładowo

Kod: Zaznacz cały

<p style="font-variant: small-caps">Blebleble</p>

wyglądałoby mniej więcej tak:

BLEBLEBLE

ponieważ wielka litera będzie nadal większa od małych.

No i powiedzmy, że to odkładam i chcę mieć same kapitaliki. Ale i tak mi nie działają! Działają dopiero kiedy wpiszę tę linijkę lowercase!

Pozdrawiam

[viraptor]

Najprościej jest zrobić w css'ie:
a {
text-transform: uppercase;
font-size: 80%;
}
Czy jakaś inna wartość, taka, żeby tekst był rozmiaru małych liter - dobierz sobie jak ci pasuje. No i oczywiście stały line-height, czy jakieś inne rozwiązanie, żeby tekst nie skakał do góry.