Text a písmo

Združená definícia písma – font

Umožňuje skrátený zápis všetkých vlastností písma:

  • font-size
  • line-height
  • font-variant
  • font-weight
  • font-style
  • font-family
p {font: small-caps bold italic Arial 120%/1.5;}

Pri použití združenej definície sú pri neuvedených vlastnostiach nastavené východiskové hodnoty.

p {font: 90% bold;}

Typ písma – font-family

  • Proporcionálne písmo – rôzne znaky majú rôznu šírku, ktorá obsahuje prázdny priestor pred a za písmenom
    • Bezpätkové (rodina sans-serif)
    • Pätkové (rodina serif)
    • Ozdobné písmo (rodina fantasy, cursive)
  • Neproporcionálne písmo (rodina monospace) – všetky znaky písma sú rovnako široké (napodobenie písacieho stroja alebo ďalekopisu)
body, table {
  font-family: 'Arial CE', 'Helvetica CE', Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman CE', 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;
}
pre, code {
  font-family: Profont, 'lucida console', 'Courier New CE',
   'Courier CE', 'Courier New', Courier, Monaco, monospace;
}

Viac viď Font-Family .

Veľkosť písma – font-size

h2 {font-size: 185%;}

Výška riadku – line-height

p {line-height: 1.5;}

Variant písma – font-variant

abbr {font-variant: small-caps;}

Tučnosť písma – font-weight

p {font-weight: normal;}
strong {font-weight: bold;}

Štýl písma – font-style

em {font-style: italic;}

Farba textu – color

body, table {color: purple;}

Veľkosť medzier medzi slovami – word-spacing

h1 {word-spacing: 1em;}

Nepodporuje IE5.5

Veľkosť medzier medzi písmenami – letter-spacing

h1 {letter-spacing: .3em;}

Biele znaky – white-space

Určuje spôsob zaobchádzania s medzerami, tabulátormi a koncami riadkov.

  • normal – východisková hodnota
  • nowrap – zakáže automatické zalamovanie riadkov
  • pre – zobrazuje biele znaky presne tak, ako v kóde dokumentu
  • pre-wrap – zobrazuje biele znaky presne tak, ako v kóde dokumentu, ale je povolené automatické zalamovanie riadkov (nepodporuje IE7- , FireFox 2.0-, Opera 7.5- a Safari 2.0-)
  • pre-line – zobrazuje zlomy riadkov tak, ako v kóde dokumentu (nepodporuje IE7- , FireFox 3.0-, Opera 9.2- a Safari 2.0-)
th {white-space: nowrap;}

Horizontálne zarovnanie obsahu – text-align

h1 {text-align: centier;} /* na stred */
p {text-align: justify;} /* do bloku */
cite {text-align: right;} /* vpravo */

Vertikálne zarovnanie – vertical-align

Používa sa pre vertikálne zarovnanie napr. malého obrázku na vyššom riadku alebo v tabuľkách.

.horni-index {vertical-align: super;} /* v tabuľke ako baseline */
.dolni-index {vertical-align: sub;} /* v tabuľke ako baseline */
.co-najviac {vertical-align: top;}
.s-hornim-okrajom-textu {vertical-align: text-top;} /* v tabuľke
 ako baseline */
.doprostred {vertical-align: middle;}
.s-dolnim-okrajom-textu {vertical-align: text-bottom;} /* v tabuľke
 ako baseline */
.co-najnižšie {vertical-align: bottom;}

IE5- podporuje iba hodnoty baseline , sub a  super .

Dekorácia textu – text-decoration

a:hover {text-decoration: underline;} /* podčiarknuté */
.ne {text-decoration: line-through;} /* preskrtnuté */
.reklama {text-decoration: blink;} /* blikajúce */

 IE7 nepozná hodnotu blink .

Odsadenie prvého riadku – text-indent

p {text-indent: 2em;}

Prevod textu – text-transform

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.veľka {text-transform: uppercase;}

Tieň textu – text-shadow

.stin {text-shadow: 3px 3px 1px #999;}
.embossed {text-shadow: 0 -1px 1px rgba(0,0,0,0.5);}
h1 {
  color: #502a2d;
  letter-spacing: 0.75em;
  text-shadow:
    2px 2px 0 #bab0a6,
    2px -2px 0 #bab0a6,
    -2px 2px 0 #bab0a6,
    -2px -2px 0 #bab0a6,
    9px 9px 0 #a63e3b;
  font-effect: outline;
}

Podpora: Firefox 3.5, Gecko 1.9.1, Opera 9.5 Safari 1.1, WebKit 100, Konqueror 3.4, Chromium 2.0.158.0

Nepodporuje IE8- , ( IE5.5 podporuje iba filtre Shadow a  DropShadow )

Smer písania textu – direction

p {direction: rtl;}

Orientácia toku textu – unicode-bidi

p {unicode-bidi: bidi-override; direction: rtl;}