You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
7.6 KiB
258 lines
7.6 KiB
<?xml version="1.0" ?>
|
|
<!DOCTYPE article PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN"
|
|
"dtd/kdex.dtd" [
|
|
<!ENTITY % addindex "IGNORE">
|
|
<!ENTITY % English "INCLUDE" > <!-- change language only here -->
|
|
]>
|
|
|
|
<article>
|
|
<articleinfo>
|
|
|
|
<authorgroup>
|
|
<author>&Lauri.Watts; &Lauri.Watts.mail;</author>
|
|
<!-- TRANS:ROLES_OF_TRANSLATORS -->
|
|
</authorgroup>
|
|
|
|
<date>2003-10-12</date>
|
|
<releaseinfo>3.2</releaseinfo>
|
|
|
|
<keywordset>
|
|
<keyword>KDE</keyword>
|
|
<keyword>CSS</keyword>
|
|
<keyword>Stylesheets</keyword>
|
|
<keyword>Accessibility</keyword>
|
|
</keywordset>
|
|
|
|
</articleinfo>
|
|
|
|
<sect1 id="stylesheets">
|
|
|
|
<title>Stylesheets</title>
|
|
|
|
<sect2>
|
|
<title>Introduction</title>
|
|
|
|
<para><acronym>CSS</acronym> style sheets affect the way web pages
|
|
appear. <acronym>CSS</acronym> stands for
|
|
<emphasis>C</emphasis>ascading <emphasis>S</emphasis>tyle
|
|
<emphasis>S</emphasis>heets.</para>
|
|
|
|
<para>&tde; can use its own stylesheet, based on simple defaults and
|
|
the color scheme you are using for your desktop. &tde; can also use a
|
|
stylesheet that you have written yourself. Finally, you can specify a
|
|
stylesheet in this module. The options presented in this module are
|
|
tuned for accessibility purposes, especially for people with reduced
|
|
vision.</para>
|
|
|
|
<para>Your choices here affect every &tde; application that renders HTML
|
|
with &tde;'s own renderer, which is called tdehtml. These include
|
|
&kmail;, &khelpcenter; and of course &konqueror;. Choices here do not
|
|
affect other browsers such as &Netscape;.</para>
|
|
|
|
<para>The module has two pages, <guilabel>General</guilabel>, where you
|
|
can choose which stylesheet to use, and <guilabel>Customize</guilabel>
|
|
where you can design an accessibility stylesheet.</para>
|
|
|
|
</sect2>
|
|
|
|
<sect2 id="css-general">
|
|
<title>General</title>
|
|
|
|
<para>This page contains the following options:</para>
|
|
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Use default stylesheet</guilabel></term>
|
|
<listitem>
|
|
<para>&tde; will use the default stylesheet. Some of the colors will
|
|
default to those defined in your chosen color scheme. Most settings are
|
|
easily overridden by the page you are viewing.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Use user-defined stylesheet</guilabel></term>
|
|
<listitem>
|
|
<para>&tde; will use a stylesheet that you have written yourself. You
|
|
can use the browse button to locate the stylesheet on your system.
|
|
<acronym>CSS</acronym> files traditionally have a <literal
|
|
role="extension">.css</literal> extension, but this is not
|
|
required.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Use accessibility stylesheet defined in
|
|
"Customize"-tab</guilabel></term>
|
|
<listitem>
|
|
<para>Use the settings defined in the <guilabel>Customize</guilabel>
|
|
tab. Enabling this option will enable the options on the
|
|
<guilabel>Customize</guilabel> page.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
|
|
</sect2>
|
|
|
|
<sect2 id="css-customize">
|
|
<title>Customize</title>
|
|
|
|
<para>Here you can set up a user stylesheet. The options available are
|
|
only a subset of the instructions you can add in a stylesheet, and they
|
|
are geared towards people with reduced vision, to allow users to create
|
|
a stylesheet that makes web pages and the &tde; help files more
|
|
readable.</para>
|
|
|
|
<para>The options on this page are disabled unless you chose
|
|
<guilabel>Use accessibility stylesheet defined in
|
|
"Customize"-tab</guilabel> on the previous page.</para>
|
|
|
|
<sect3>
|
|
<title><guilabel>Font Family</guilabel></title>
|
|
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Base family</guilabel></term>
|
|
<listitem>
|
|
<para>Choose a font family to use for body text.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Use same family for all text</guilabel></term>
|
|
<listitem>
|
|
<para>If you enable this, then the same font family will be used for all
|
|
text, regardless of the settings on the page you are viewing. This is
|
|
useful for pages which have used a decorative or hard to read font for
|
|
headlines.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</sect3>
|
|
|
|
<sect3>
|
|
<title>Font Size</title>
|
|
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Base Font Size</guilabel></term>
|
|
<listitem>
|
|
<para>This is the default size for text on the page. Many web sites set
|
|
their font sizes relative to this default, using <quote>larger</quote>
|
|
or <quote>+1</quote> to make the text bigger, and <quote>smaller</quote>
|
|
or <quote>-1</quote> to make the text smaller.</para>
|
|
<para>Many people design their web pages on platforms where the ordinary
|
|
default text size is too large for the average user to read, so it is
|
|
very common to come across web pages that have forced the font smaller
|
|
in this way.</para>
|
|
<para>This setting will allow you to set the default font to a
|
|
comfortable size, so that the relative sizes are also enlarged enough to
|
|
be comfortable.</para>
|
|
<para>Do not forget you can also have &konqueror; enforce a minimum size,
|
|
so that text is <emphasis>never</emphasis> too small to read. Set that
|
|
under Behavior, in the Web Browser section in &kcontrol;.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Use same size for all elements</guilabel></term>
|
|
<listitem>
|
|
<para>If you enable this option, then all text will be rendered at your
|
|
specified font size, regardless of the instructions the page contains.
|
|
Relative font sizes as discussed earlier, and even specific instructions
|
|
that text should be rendered at a certain size will be overridden
|
|
here.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</sect3>
|
|
|
|
<sect3>
|
|
<title>Colors</title>
|
|
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Black on White</guilabel></term>
|
|
<listitem>
|
|
<para>Many people with reduced vision find black text on a white screen
|
|
gives the most contrast, and is easiest to read. If this applies to
|
|
you, you can set this here.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>White on Black</guilabel></term>
|
|
<listitem>
|
|
<para>Many other people with reduced vision find the opposite to be
|
|
true, that white text on a black screen is easier to read.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Custom</guilabel></term>
|
|
<listitem>
|
|
<para>Still other people find that pure black and white, in either
|
|
order, is difficult to read. You can set custom colors here for both
|
|
the <guilabel>Background</guilabel> and the
|
|
<guilabel>Foreground</guilabel>.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Use same color for all text</guilabel></term>
|
|
<listitem>
|
|
<para>Many web sites use a different, often contrasting color for
|
|
headings or other flourishes. If this interferes with your ability to
|
|
read the content, you can enable this checkbox to have &tde; use the
|
|
colors you have set above for all text.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
|
|
</sect3>
|
|
|
|
<sect3>
|
|
<title>Images</title>
|
|
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Suppress images</guilabel></term>
|
|
<listitem>
|
|
<para>If you do not want to view images, you can turn this off
|
|
here.</para></listitem>
|
|
</varlistentry>
|
|
|
|
<varlistentry>
|
|
<term><guilabel>Suppress background images</guilabel></term>
|
|
<listitem>
|
|
<para>One major problem for reduced vision users is that background
|
|
images do not give sufficient contrast to allow them to read the text.
|
|
You can disable background images here, independently of your choice
|
|
above to view all images.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
|
|
</sect3>
|
|
|
|
<sect3>
|
|
<title>Preview</title>
|
|
|
|
<para>The <guibutton>Preview</guibutton> allows you to see the effect of
|
|
your changes. A window will pop up, showing how several types of
|
|
headings will appear with your stylesheet, and a sentence in the default
|
|
body text.</para>
|
|
|
|
<para>This should allow you to fine tune your stylesheet until you have
|
|
something that you can comfortably read.</para>
|
|
|
|
<para>Happy surfing!</para>
|
|
|
|
</sect3>
|
|
|
|
</sect2>
|
|
|
|
</sect1>
|
|
|
|
</article>
|