Introducing XWeb

Marking up the details

There are some special parts that can be marked up if the appropriate parameters for the XSLT stylesheet are set. You can find more information on these parameters in the parameters section, either on adding CSS markup or on using the additional features. This page will give some examples how to use CSS for formatting the results.

Highlighting the first letter in paragraph

CSS has a pseudo-classfirst-letter that can be used to format the first letter in a paragraph in a different way, e.g. with different color or font. Unfortunately this feature is not only missing in many browsers (e.g. Netscape Navigator up to 4.x), it also breaks in some browsers the layout (Internet Explorer 5.x and 6.0 break indentation after one-line paragraphs if the feature is used). Esp. the latter makes it nearly impossible to use the CSS pseudo-class, therefore the generic stylesheet offers a feature to replace this.

If the stylesheet parameter style.markup.firstLetter is set to "on" the stylesheet will add a <span> element with the CSS class firstLetter around the first letter of each paragraph. This can be used in the usual way and will work with every typical browser supporting CSS. Here is a simple example changing the color and weight for the first letter in a paragraph, taken from the CSS for this manual:

  .firstLetter {
      color:rgb(236,158,0); 
      font-weight:bold;
  }

Here we address just everything with the classfirstLetter, more specific would be to address span.firstLetter instead.

Differentiating links

There are three different ways the generic stylesheets adds classes to the links. Note that all of these classes will only be added if a link has no class before the stylesheet is run, if a class already exists it will not be changed.

The first class is used whenever the feature.internalLink.token is used and a link was resolved since it started with the given token. A link resolved in this manner will have the class xwebLink attached to it, you can specify specific colors or other effects to distinguish these links as done in this manual:

  a.xwebLink:link, a.xwebLink:visited {
      color:rgb(236,158,0); 
      text-decoration:none;
  }
  a.xwebLink:hover, a.xwebLink:active {
      color:rgb(236,158,0);
      text-decoration:underline;
  }

These CSS rules give the internal links an orange color, while the other links are formatted in a red color.

You can even use different formatting for different types of links, e.g. format mail addresses different from web addresses. To get this you have to set the parameter style.markup.linkTypes to "on". Two types of classes will appear in the HTML.

The first is the classlocalLink which is used whenever no protocol is specified in the URL given for the link, usually links like this are relative links. The other are the protocol specific classes, their names are generated from the protocol identifiers by taking the text in front of the colon in the url and adding Link behind it. For example a link to a webpage will have the class httpLink while a mail address will have the class mailtoLink. If you want to distinguish mail addresses from all other links you can give the following CSS:

  a.mailtoLink:link, a.mailtoLink:visited {
      color:rgb(0,100,255); 
      text-decoration:none;
  }
  a.mailtoLink:hover, a.mailtoLink:active {
      color:rgb(0,100,255);
      text-decoration:underline;
  }

This will give all mail links a blue color, while the other links will use the default colors unless otherwise specified.

Formatting the paragraph numbers

The parameter feature.numberParagraphs can be set to "on" to make each paragraph addressable by anchor tags. The paragraph numbers will be displayed behind the paragraphs and unless you use CSS to change the formatting they will have the same font and color as the rest of the paragraph. Usually you will want to change this, e.g. like this:

  .paragraphNumber {
      font-size: 75%;
      color: rgb(192,192,192);
  }
  .paragraphNumber a:link, .paragraphNumber a:visited {
      text-decoration: none;
  }
  .paragraphNumber a:hover, .paragraphNumber a:active {
      text-decoration: underline;
  }

This makes the font smaller and uses a pretty light grey as color so the paragraph numbers are less visible than the normal text. Note that the paragraph numbers themself are links, so you have to handle the looks for the links, too.

If you only want to be able to address the paragraphs but not to show the numbers on the screen you can hide the numbers by using this CSS rule:

  .paragraphNumber {
      display: none;
  }

This will still put the numbers into the HTML code, but they will not be visible on the page.