runtime/doc/kcontrol/kcmcss/index.docbook

   1 <?xml version="1.0" ?>
   2 <!DOCTYPE article PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN"
   3 "dtd/kdex.dtd" [
   4 <!ENTITY % addindex "IGNORE">
   5 <!ENTITY % English "INCLUDE" > <!-- change language only here -->
   6 ]>
   7
   8 <article>
   9 <articleinfo>
  10
  11 <authorgroup>
  12 <author>&Lauri.Watts; &Lauri.Watts.mail;</author>
  13 <!-- TRANS:ROLES_OF_TRANSLATORS -->
  14 </authorgroup>
  15
  16 <date>2003-10-12</date>
  17 <releaseinfo>3.2</releaseinfo>
  18
  19 <keywordset>
  20 <keyword>KDE</keyword>
  21 <keyword>CSS</keyword>
  22 <keyword>Stylesheets</keyword>
  23 <keyword>Accessibility</keyword>
  24 </keywordset>
  25
  26 </articleinfo>
  27
  28 <sect1 id="stylesheets">
  29
  30 <title>Stylesheets</title>
  31
  32 <sect2>
  33 <title>Introduction</title>
  34
  35 <para><acronym>CSS</acronym> style sheets affect the way web pages
  36 appear.  <acronym>CSS</acronym> stands for
  37 <emphasis>C</emphasis>ascading <emphasis>S</emphasis>tyle
  38 <emphasis>S</emphasis>heets.</para>
  39
  40 <para>&kde; can use its own stylesheet, based on simple defaults and
  41 the color scheme you are using for your desktop.  &kde; can also use a
  42 stylesheet that you have written yourself.  Finally, you can specify a
  43 stylesheet in this module.  The options presented in this module are
  44 tuned for accessibility purposes, especially for people with reduced
  45 vision.</para>
  46
  47 <para>Your choices here affect every &kde; application that renders HTML
  48 with &kde;'s own renderer, which is called khtml.  These include
  49 &kmail;, &khelpcenter; and of course &konqueror;.  Choices here do not
  50 affect other browsers such as &Netscape;.</para>
  51
  52 <para>The module has two pages, <guilabel>General</guilabel>, where you
  53 can choose which stylesheet to use, and <guilabel>Customize</guilabel>
  54 where you can design an accessibility stylesheet.</para>
  55
  56 </sect2>
  57
  58 <sect2 id="css-general">
  59 <title>General</title>
  60
  61 <para>This page contains the following options:</para>
  62
  63 <variablelist>
  64 <varlistentry>
  65 <term><guilabel>Use default stylesheet</guilabel></term>
  66 <listitem>
  67 <para>&kde; will use the default stylesheet.  Some of the colors will
  68 default to those defined in your chosen color scheme.  Most settings are
  69 easily overridden by the page you are viewing.</para>
  70 </listitem>
  71 </varlistentry>
  72
  73 <varlistentry>
  74 <term><guilabel>Use user-defined stylesheet</guilabel></term>
  75 <listitem>
  76 <para>&kde; will use a stylesheet that you have written yourself. You
  77 can use the browse button to locate the stylesheet on your system.
  78 <acronym>CSS</acronym> files traditionally have a <literal
  79 role="extension">.css</literal> extension, but this is not
  80 required.</para>
  81 </listitem>
  82 </varlistentry>
  83
  84 <varlistentry>
  85 <term><guilabel>Use accessibility stylesheet defined in
  86 &quot;Customize&quot;-tab</guilabel></term>
  87 <listitem>
  88 <para>Use the settings defined in the <guilabel>Customize</guilabel>
  89 tab.  Enabling this option will enable the options on the
  90 <guilabel>Customize</guilabel> page.</para>
  91 </listitem>
  92 </varlistentry>
  93 </variablelist>
  94
  95 </sect2>
  96
  97 <sect2 id="css-customize">
  98 <title>Customize</title>
  99
 100 <para>Here you can set up a user stylesheet.  The options available are
 101 only a subset of the instructions you can add in a stylesheet, and they
 102 are geared towards people with reduced vision, to allow users to create
 103 a stylesheet that makes web pages and the &kde; help files more
 104 readable.</para>
 105
 106 <para>The options on this page are disabled unless you chose
 107 <guilabel>Use accessibility stylesheet defined in
 108 &quot;Customize&quot;-tab</guilabel> on the previous page.</para>
 109
 110 <sect3>
 111 <title><guilabel>Font Family</guilabel></title>
 112
 113 <variablelist>
 114 <varlistentry>
 115 <term><guilabel>Base family</guilabel></term>
 116 <listitem>
 117 <para>Choose a font family to use for body text.</para>
 118 </listitem>
 119 </varlistentry>
 120
 121 <varlistentry>
 122 <term><guilabel>Use same family for all text</guilabel></term>
 123 <listitem>
 124 <para>If you enable this, then the same font family will be used for all
 125 text, regardless of the settings on the page you are viewing.  This is
 126 useful for pages which have used a decorative or hard to read font for
 127 headlines.</para>
 128 </listitem>
 129 </varlistentry>
 130 </variablelist>
 131 </sect3>
 132
 133 <sect3>
 134 <title>Font Size</title>
 135
 136 <variablelist>
 137 <varlistentry>
 138 <term><guilabel>Base Font Size</guilabel></term>
 139 <listitem>
 140 <para>This is the default size for text on the page.  Many web sites set
 141 their font sizes relative to this default, using <quote>larger</quote>
 142 or <quote>+1</quote> to make the text bigger, and <quote>smaller</quote>
 143 or <quote>-1</quote> to make the text smaller.</para>
 144 <para>Many people design their web pages on platforms where the ordinary
 145 default text size is too large for the average user to read, so it is
 146 very common to come across web pages that have forced the font smaller
 147 in this way.</para>
 148 <para>This setting will allow you to set the default font to a
 149 comfortable size, so that the relative sizes are also enlarged enough to
 150 be comfortable.</para>
 151 <para>Do not forget you can also have &konqueror; enforce a minimum size,
 152 so that text is <emphasis>never</emphasis> too small to read.  Set that
 153 under Behavior, in the Web Browser section in &kcontrol;.</para>
 154 </listitem>
 155 </varlistentry>
 156
 157 <varlistentry>
 158 <term><guilabel>Use same size for all elements</guilabel></term>
 159 <listitem>
 160 <para>If you enable this option, then all text will be rendered at your
 161 specified font size, regardless of the instructions the page contains.
 162 Relative font sizes as discussed earlier, and even specific instructions
 163 that text should be rendered at a certain size will be overridden
 164 here.</para>
 165 </listitem>
 166 </varlistentry>
 167 </variablelist>
 168 </sect3>
 169
 170 <sect3>
 171 <title>Colors</title>
 172
 173 <variablelist>
 174 <varlistentry>
 175 <term><guilabel>Black on White</guilabel></term>
 176 <listitem>
 177 <para>Many people with reduced vision find black text on a white screen
 178 gives the most contrast, and is easiest to read.  If this applies to
 179 you, you can set this here.</para>
 180 </listitem>
 181 </varlistentry>
 182
 183 <varlistentry>
 184 <term><guilabel>White on Black</guilabel></term>
 185 <listitem>
 186 <para>Many other people with reduced vision find the opposite to be
 187 true, that white text on a black screen is easier to read.</para>
 188 </listitem>
 189 </varlistentry>
 190
 191 <varlistentry>
 192 <term><guilabel>Custom</guilabel></term>
 193 <listitem>
 194 <para>Still other people find that pure black and white, in either
 195 order, is difficult to read.  You can set custom colors here for both
 196 the <guilabel>Background</guilabel> and the
 197 <guilabel>Foreground</guilabel>.</para>
 198 </listitem>
 199 </varlistentry>
 200
 201 <varlistentry>
 202 <term><guilabel>Use same color for all text</guilabel></term>
 203 <listitem>
 204 <para>Many web sites use a different, often contrasting color for
 205 headings or other flourishes.  If this interferes with your ability to
 206 read the content, you can enable this checkbox to have &kde; use the
 207 colors you have set above for all text.</para>
 208 </listitem>
 209 </varlistentry>
 210 </variablelist>
 211
 212 </sect3>
 213
 214 <sect3>
 215 <title>Images</title>
 216
 217 <variablelist>
 218 <varlistentry>
 219 <term><guilabel>Suppress images</guilabel></term>
 220 <listitem>
 221 <para>If you do not want to view images, you can turn this off
 222 here.</para></listitem>
 223 </varlistentry>
 224
 225 <varlistentry>
 226 <term><guilabel>Suppress background images</guilabel></term>
 227 <listitem>
 228 <para>One major problem for reduced vision users is that background
 229 images do not give sufficient contrast to allow them to read the text.
 230 You can disable background images here, independently of your choice
 231 above to view all images.</para>
 232 </listitem>
 233 </varlistentry>
 234 </variablelist>
 235
 236 </sect3>
 237
 238 <sect3>
 239 <title>Preview</title>
 240
 241 <para>The <guibutton>Preview</guibutton> allows you to see the effect of
 242 your changes.  A window will pop up, showing how several types of
 243 headings will appear with your stylesheet, and a sentence in the default
 244 body text.</para>
 245
 246 <para>This should allow you to fine tune your stylesheet until you have
 247 something that you can comfortably read.</para>
 248
 249 <para>Happy surfing!</para>
 250
 251 </sect3>
 252
 253 </sect2>
 254
 255 </sect1>
 256
 257 </article>