The XHTML WYSIWYG Editor For Desktop & Web Applications

Styles

Styles are instructions for generating markup (code). Styles are not CSS rules. CSS is often applied to the markup to create formatting. For example, a style called Underline may create markup that looks like this:

  1. <span class="underline">Hello World</span>

If there is a CSS rule span.underline {text-decoration:underline}, then the words Hello Word would be underlined.

The Styles seen in XStandard's drop-down menu (below) are generated by an XML document. The XML document has a simple structure and can be composed in Notepad. An example of this document can be found at "C:\Program Files\XStandard\styles.xml" on Windows, in "/Applications/XStandard/styles.xml" on OS X or download styles.xml.

Image of a Styles selector

In order for the editor to load your styles.xml file, put styles.xml on your Web site and point the editor to this file via an absolute URL like this:

  1. <param name="Styles" value="http://localhost/styles.xml" />

If no custom styles.xml file is specified, XStandard will use built-in styles such as Bold, Italic, Superscript, Subscript, Heading, Sub-heading, Abbreviation, Computer Code, etc.

The Styles drop-down list can be hidden from view using the following tag:

  1. <param name="ShowStyles" value="no" />

The following XML code is an example of styles.xml file:

  1. <styles>
  2. <style>
  3. <label>Bold</label>
  4. <elt>strong</elt>
  5. </style>
  6. <style>
  7. <label>Italic</label>
  8. <elt>em</elt>
  9. </style>
  10. <style>
  11. <label>Underline</label>
  12. <elt>span</elt>
  13. <attr>
  14. <name>class</name>
  15. <value>underline</value>
  16. </attr>
  17. </style>
  18. <style>
  19. <label>Highlight Text</label>
  20. <elt>span</elt>
  21. <attr>
  22. <name>class</name>
  23. <value>highlight</value>
  24. </attr>
  25. </style>
  26. </styles>

Styles can be grouped for ease of use, as seen in the examples below. Translations for styles can be stored in the same XML document, using the "xml:lang" attribute. The <param> named "Lang" will determine which translation to use.

This image shows Styles translated in English and French.

It is a good idea to get into the habit of storing XML documents in Unicode. In Notepad, select File > Save As, then select Unicode from the Encoding drop-down box.

The styles.xml file used to generate the bilingual example above might look like this:

  1. <styles>
  2. <group>
  3. <label xml:lang="en">General</label>
  4. <label xml:lang="fr">Général</label>
  5. <style>
  6. <label xml:lang="en">Bold</label>
  7. <label xml:lang="fr">Caractère gras</label>
  8. <elt>strong</elt>
  9. </style>
  10. <style>
  11. <label xml:lang="en">Italic</label>
  12. <label xml:lang="fr">Italique</label>
  13. <elt>em</elt>
  14. </style>
  15. <style>
  16. <label xml:lang="en">Underline</label>
  17. <label xml:lang="fr">En souligné</label>
  18. <elt>span</elt>
  19. <attr>
  20. <name>class</name>
  21. <value>underline</value>
  22. </attr>
  23. </style>
  24. <style>
  25. <label xml:lang="en">Highlight Text</label>
  26. <label xml:lang="fr">En surbrillance</label>
  27. <elt>span</elt>
  28. <attr>
  29. <name>class</name>
  30. <value>highlight</value>
  31. </attr>
  32. </style>
  33. </group>
  34. <group>
  35. <label xml:lang="en">Book</label>
  36. <label xml:lang="fr">Livre</label>
  37. <style>
  38. <label xml:lang="en">Chapter Title</label>
  39. <label xml:lang="fr">Titre du chapitre</label>
  40. <elt>h1</elt>
  41. </style>
  42. <style>
  43. <label xml:lang="en">Character</label>
  44. <label xml:lang="fr">Personnage</label>
  45. <elt>character</elt>
  46. </style>
  47. <style>
  48. <label xml:lang="en">Quote</label>
  49. <label xml:lang="fr">Citation</label>
  50. <elt>q</elt>
  51. </style>
  52. <style>
  53. <label xml:lang="en">Footnote</label>
  54. <label xml:lang="fr">Note en bas de page</label>
  55. <elt>div</elt>
  56. <attr>
  57. <name>class</name>
  58. <value>footnote</value>
  59. </attr>
  60. </style>
  61. </group>
  62. </styles>

This table explains each element in the styles.xml document.

ElementUsage
 <styles>The root element that identifies this XML document as a Styles XML document. It must contain at least one <style> or <group> element.
 <group>Used to group styles together. This element must contain a <name> element and at least one <style> element. The <name> element can have an xml:lang attribute.
 <style>Used to define a style. This element must contain a <name>, <elt> and zero or more <attr> elements. The <name> element can have an xml:lang attribute. An optional <id> child element can assign a unique ID to this style.
 <label>Defines a group name or a style name.
 <id>Used to define a unique ID for a style. This ID is used in API such as ApplyStyleID() and CurrentStyles().
 <elt>This is the name of the XHTML tag to be created by the style. It must conform to XML naming rules (no spaces in the name and cannot start with a number), for example: h1 or strong.
 <attr>Used to define an attribute. It must contain one <name> element and one <value> element. The child <name> element cannot have an xml:lang attribute.
 <name>Defines an attribute name.
 <value>Value of an attribute. This could be text or a function like: id(), now(), date(), time(), day(), month(), year(), week(), day-of-year(), weekday(), guid(), random().

You can use styles to create any element with any number of attributes. See Best Practices to get the most out of the Styles feature.