3. CSS stylesheets found in the View menu

The View menu allows to choose between the following two CSS stylesheets:

Semantic (default CSS stylesheet)

This stylesheet contains styles which are intended to reflect the purpose of each XHTML element. This stylesheet makes it easy editing XHTML documents in a validating XML Editor such as XXE.

Note that in the "XHTML 5" configuration, the "Semantic" stylesheet dynamically applies the style attribute to table elements such as table, colgroup, tbody, td, etc^[2]. This counterbalances the fact that, in XHTML 5, all attributes influencing table rendering (frame, rules, width, valign, etc) have been removed from table elements.

Emulate Web Browser

This stylesheet emulates (to a certain extent) how a Web browser typically renders an HTML page.

When this stylesheet has been selected, XXE will dynamically apply all the CSS styles found in style attributes, style elements and link elements pointing to CSS stylesheets.

Sometimes XXE will fail to detect a change in how the XHTML document being edited should be styled. In such case, you'll have to reload the "Emulate Web Browser" stylesheet by reselecting this item in the View menu. For example, the following changes will not automatically trigger style changes:

Modify the textual content of a style element.
Paste a div element containing a style element having no scoped attribute.


When XXE finds errors in the CSS styles it attempts to apply dynamically, it will not report these errors. Instead, it will log them in a special log called "User Styles". If you suspect that XXE has found errors in your CSS styles, you may want to view the content of this log by clicking the Show Message Log button in XMLmind XML Editor - Online Help which is next to the status line found at the bottom of XXE's window^[3] and then select "User Styles" from the Category combobox.

When XXE finds errors in the CSS styles it attempts to apply dynamically, it will not report these errors. Instead, it will log them in a special log called "User Styles". If you suspect that XXE has found errors in your CSS styles, you may want to view the content of this log by clicking the Show Message Log button in XMLmind XML Editor - Online Help which is next to the status line found at the bottom of XXE's window^[3] and then select "User Styles" from the Category combobox.


If you often use `<div class="XXX">` and/or `<span class="YYY">` elements in your XHTML documents and want to see these elements properly styled using the `<link rel="stylesheet">` element found in the `head` of your XHTML documents, you may want to make the "Emulate Web Browser" stylesheet your default one. In order to do this, simply select this stylesheet from the View menu and then select Options → Customize Configuration → Save Views As Default^[4].

If you often use <div class="XXX"> and/or <span class="YYY"> elements in your XHTML documents and want to see these elements properly styled using the <link rel="stylesheet"> element found in the head of your XHTML documents, you may want to make the "Emulate Web Browser" stylesheet your default one. In order to do this, simply select this stylesheet from the View menu and then select Options → Customize Configuration → Save Views As Default^[4].

3.1. Ruby, form controls and embedded content

Both the above CSS stylesheets support ruby, form controls and embedded content (iframe, object, video, etc). However in the case of the input form control, some attributes such as autocomplete, list, maxlength, minlength, etc, are not yet supported.

The "Emulate Web Browser" stylesheet renders the following elements the same way as in a Web browser, at the expense of a less convenient editing: ruby, the select form control and most embedded content elements.

A demo document showing these features is available in XXE_install_dir/demo/xhtml5-objects.html.

^[2]Only the style attribute and only the table elements, unlike the "Emulate Web Browser" stylesheet.

^[3]Or simply right-click on the status line.

^[4]If you are a consultant customizing XXE for a group of writers, you'll have to customize the XHTML configuration by adding to it a windowLayout configuration element in XMLmind XML Editor - Configuration and Deployment.