@informatik.hu-berlin.de
Reports
- postindustr.CC
- XML/Ti Report
- pTA StudienArbeit .
- sch_llf study
- Geschichte des PC
TechDocs
- Perl Objects
- Installing Oracle
- shell cmds in python
- Using css for xml
defs tricks
- Unsafe mono [x] !
- Docbook Manpages
- Java Bean Code
rpm-suse
- schema-mappingen
ig cv hg re dv ev
zz mk pr
- java problemsen
lang swing ext gtk jjtree xul
boot
-grub-netboot
-grub-gtk
-partclone freshmeat
-partimage links
-releaseuploader
-guidod-pygtk
| sitemap | *offsite link |
2005-01-22
(C) Guido Draheim
guidod@gmx.de
generated by
mksite.sh
Howto Add CSS To XML (techdoc)
The original answer is very very simple: adding a CSS (cascaded stylesheet) is simply done by a "processing instruction" named <?xml-stylesheet> - This is quite logical as it allows the stylesheet reference to be not a required part of the DTD (document type definition) like it is done in HTML's <style> tag. Instead you may attach a formatter definition via a stylesheet onto any xml document type. That looks looks like:
<?xml-stylesheet href="ht.css" ?>
<body>
<h1> hello world </h1>
<h1 class="oops"> OOPs </h1>
</body>
The next question is: what to put into the CSS stylesheet? Most people are used to add some css bits into a HTML file which in reality means to add some extra style on top of the normal html formatter - with an xml file however we start off from a blank formatter definition: not even a linebreak is preserved. Essentially all the text will be presented as a single line.
The first attempt is to try to preserve the traditional way of
using CSS: the HTML formatter definition has been released by
means of a CSS file - mozilla will ship it along and there is
a sample somewhere at http://w3.org.
It is usually called html.css and you can
include it into your own personal CSS file via @import
which looks like:
@import "html.css";
h1 { color : green ; }
h1[class=oops] { color : red ; }
Just play a bit with it - and you will notice that this mode does
only allow you modify existing tag names out of the html processing.
If you want to have something extra over html then you must still
use a subclassing by means of an attribute - you do already know
that from pure html where a subclass is select via
<tag class="..">. Most people are not aware
that you are free to use subselect on any attribute -
the CSS line
"H1 .mysubclass { defs : value }
is actually identical with
"H1 [class=mysubclass] { def : value }
However, in most cases you do not want to define your own XML format
in terms of HTML tags with special attributes for subclassing. You
want to have them to be firstlevel markup tags. But those are just
<span> tags from the start - and CSS does not have the feature
to define a new markup by inheriting all css def/values that are
already bound to an existing markup (i.e. an existing html markup).
The "@import" is really only for complete stylesheets - you
can not build new markups on top of what you know from html formatter
definitions.
That is a hard lesson to be learned actually because now it simply means that it is not sufficient to know some "color" def or "width" or "left-margin" defs. Instead you must know all the css defs bound to a "p" tag if you want to create something similar to a paragraph getting visualized on the screen. So, do you know in what defs a <p> is different from a <span>?
As for a <p> tag it happens to be more or less simple since in most browsers a <p> is defined as just a block tag (like <div>) that has some small vertical margin around it but no margin to the horizontal sides. Just grep for the "p" tag in the "html.css" file, it will most probably look like:
p { display : block ; top-margin : 1em; }
Therefore: for any of your new xml tags you better define the "display" def in your new css stylesheet. Most of its values have similarity to known html tags - so let's have a look, the display values may be:
{ display : inline } /* like a SPAN tag (default) */
{ display : block } /* like a DIV tag */
{ display : table } /* like a TABLE tag */
{ display : table-caption } /* like a CAPTION tag */
{ display : table-row } /* like a TR tag */
{ display : table-cell } /* like a TD tag */
{ display : list-item } /* like a LI tag */
{ display : none } /* like a HEAD tag */
Sure there are a few more "display" def settings - instead of definining a table row-by-row it is also possible to define a table column-by-column at a time. It's just that html does not have <column> tag with a css def of {display:column} value. In large parts the "display" def defines which of the other css defs will be relevant for visualization. For "block" tag it is usually the margins that you want to set:
{ margin-top : 1em } { margin-left : 1em }
{ margin-bottom : 1em } { margin-right : 1em }
Among the additional css defs for a "block" we find usually "width", "height" and "border-width" which take each a numeric argument. Instead of defining the "margin" around the block (invisible) border you can also define a "padding" which is the space between the (invisible) border and the content. Using CSS you are free to define not only one value for all the four sides of a block display but just like with "margin" above you can set each side with a different value
{ border-left : solid ; border-width : thin ; border-color : blue ;
border-bottom : dotted ; border-spacing : 2px ; border-collaps ; }
The other css defs are probably known to you as the define things
like float:right color:blue or
background-color:green. Other things include:
{ font-size : smaller } /* <small> */
{ font-weight : bold } /* <b> */
{ text-align : center } /* <center> */
{ vertical-align : super } /* <sup> */
{ text-decoration : underline } /* <u> */
{ font-style : italic } /* <i> */
{ white-space : pre } /* <pre> */
An interesting means for CSS stylesheets is the option to add additional visual content - these allow you to skip some of transformations that would touch document content. One of the usual content extras is... in adding doublequotes around a text string being put in markups in the document. This is done through pseudo-markups like
q :before { content : open-quote }
q :after { content : close-quote }