Clean XHTML Output

Input and output are clean XHTML.

Documents or fragments
supports a large subset of XHTML (W3C XHTML v1.1).
  • Work with an entire <html> document.
  • Or a document fragment, whose root is a block-level element, for example <body>, <div>, or <p>.
Elements
some (not all) HTML elements can be rendered.
  • The built-in UI creates a subset of the elements.
  • You can use the API to create other elements.
CSS styling
uses built-in CSS Parser to style the displayed document.
  • The CSS parser supports all standard stylesheet syntax.
  • Rendering supports the more important CSS properties.

XHTML Documents or Fragments

ModelText's HTML edit control is designed to parse, render, and edit XHTML only. It uses an XML reader to parse its input: it will not accept "tag soup" as input.

It supports a large subset of XHTML v1.1, whose DOCTYPE is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

It can parse and render an entire document; or, it can also parse an XHTML document fragment, whose root is any block element: for example a <div> element, plus the child elements and text nodes which are valid embedded within the <div>.

Table of Supported HTML Elements

The following table details the control's support for XHTML.

Rendering In the following table, the Rendering column specifies whether the control is able to render these elements. In general, the control is able to render almost every type of XHTML element.
WYSIWYM Editing

In the following table, the WYSIWYM Editing column specifies whether the built-in WYSIWYM UI is able to edit these elements. In general, the WYSIWYM UI supports editing all the most basic types of XHTML element, including:

  • Paragraphs
  • Headings
  • Ordered and unordered lists
  • Simple tables
  • Anchor tags (with support from the application via the API).

In keeping with its being a simple WYSIWYM and not a WYSIWYG editor, the built-in UI doesn't support editing many of the less-used elements; but support for these elements could easily be added.

See also Sample HTML for an example of the elements supported by the WYSIWYM editor.

API Only In the following table, API Only means that support for editing this element is not built-in to the standard WYSIWYM UI, but that editing can be added as an application-specific extension, using the API. The API is mentioned in WYSIWYG Editing UI, and defined in APIs for the HTML Edit Control. There are examples of how to use the API, in the sample programs which are included with the Download.
Module Rendering WYSIWYM Editing
Attribute Collections The class, id, and style attributes Supported API Only
'Events' attributes like onclick and onkeypress These attributes are ignored: your application installs event handlers using imperative .NET APIs, instead of declaratively.
Structure Module body, head, html, and title Supported API Only
Text Module br, h1, h2, h3, h4, h5, h6, and p. Supported Supported
abbr, acronym, address, blockquote, cite, code, dfn, div, em, kbd, q, samp, span, strong, and var. Supported API Only
pre. Not supported
Hypertext Module a. Supported API Only
List Module ol, ul, and li. Supported Support simple ordered and unordered lists; nested lists are via API Only.
dl, dt, and dd. Supported API Only
Text Extension Module b, big, del, i, ins, small, sub, sup, and tt. Supported API Only
bdo. Not supported.
Forms Modules form, input, label, select, option, and textarea. Supported. API Only
button, fieldset, legend, and optgroup. Not supported.
Table Modules table, tr, and td. Partially supported: the elements are supported, but the attributes are ignored; for example rowspan and colspan attributes are ignored, and the borders and so on can be specified via CSS but not using inline attributes. Supported
tbody, thead, tfoot, col, and th. API Only
caption and colgroup. Not supported.
The various other modules (including images and image maps, applets, objects, frames and targets) are not supported.

CSS Syntax and Grammar

The control parses CSS stylesheets, computes CSS property values, and applies the property values to the HTML elements which it renders.

You can use a sophisticated style sheet, because the control supports:

The only limitation is that the syntax of the CSS stylesheet must be valid: syntax checking is strict, and the Rules for handling parsing errors are not supported.

Table of Supported CSS Properties

ModelText's HTML edit control supports the subset of the CSS properties which configure:

  • Fonts
  • Foreground and background colors
  • Margins, borders, and padding of block and table elements (the 'box model')
  • List styles
  • Display inline, block, list item, table, and inline block elements (plus display:none to support hidden elements).
  • Cursor style (for example, when mousing over a hyperlink)

The following table shows which subset of all CSS properties are currently implemented in the rendering (other CSS properties, if present in the stylesheet, are ignored).

Property Support
background-attachment, background-color, background-image, background-position, background-repeat, and background. Only background-color.
border-collapse Supported
border-color Supported
border-spacing Supported
border-style Only none or solid
border-width Supported
bottom Not supported
caption-side Not supported
clear Not supported
clip Not supported
color Supported
content Not supported
counter-increment, counter-reset Not supported
cursor Supported
direction Not supported
display Supports inline, block, list-item, table, none, and inline-block; not run-in or inline-table.
empty-cells Not supported
float Not supported
font-family, font-size, font-style, font-variant, and font-weight. Supported
height Not supported
left Not supported
letter-spacing Not supported
line-height Supported
list-style-image and list-style-position Not supported
list-style-type Only disc, circle, square, and decimal.
margin Supported
max-height, max-width, min-height, and min-width , Not supported
orphans Not supported
outline Not supported
overflow Not supported
padding Supported
page-break-after, page-break-before, page-break-inside Not supported
position Not supported
quotes Not supported
right Not supported
table-layout Not supported
text-align Supports left, right, and center; not justify.
text-decoration Supported
text-indent, text-transform Not supported
top Not supported
unicode-bidi Not supported
vertical-align Supported
visibility Not supported (but display:none is supported)
white-space Not supported
widows Not supported
width Supported
word-spacing Not supported
z-index Not supported

Sample CSS

The following is an example of a CSS file, which is included with the sample program in the Download and supported by the control:

/*
This file contains CSS rules which customize
the appearance of the HTML which is displayed.
You may alter the contents of this file.
*/
td
{ border-style: solid; border-width: thin;
padding: 0.5em 1em }
body, form
{ margin: 0 1.5em 1em; line-height: 1.33;
font-family: Calibri, Verdana, sans-serif;
font-size: 11pt; padding: 0 }
		  
P, BLOCKQUOTE, UL,
FIELDSET,
OL, DL, DIR,
MENU            { margin: 1em 0 }
OL, UL, DIR,
MENU, DD        { margin-left: 3em }
DT        { margin-left: 1.5em; font-weight: bold }
LI      { margin: 0.25em 0 }
/* some settings for O/S-specific form controls */
textarea,
select,
input,
input[type="text"]
{ border-style: solid; border-width: thin;
padding: 1px 2px }
ul.simple	{ list-style-type: none }
textarea	{ width: 100% }
h1, h2, h3, h4, h5, h6
{ font-family: Cambria, "Times New Roman", serif;
color: red }
h1
{ font-weight: bold; font-size: 14pt; }
h2
{ font-weight: bold; font-size: 13pt; }
h3
{ font-weight: bold; font-size: 11pt; }
h4
{ font-weight: bold; font-size: 11pt; font-style: italic }
h6
{ font-style: italic }
/*
show various non-standard background colors
ugly but a demonstration of how well they're painted
*/
body { background-color: fuchsia; }
p { background-color: #ffff80; }
a { background-color: silver; }
tr { background-color: aqua; }
td { background-color: silver; }
ul { background-color: #80ff80; }
/*
ensure that the selection always looks highlighted, i.e.
that it overrides all the default background colors
*/
:selection
{ background-color: Highlight !important;
color: HighlightText; }

Sample HTML

The following shows an example of some XHTML elements, which end users can create using the WYSIWYM UI:

  • Valid XHTML document (or it can also edit a fragment)
  • Paragraphs, and headings
  • Lists
  • Hyperlinks
  • Simple tables

Input and Output

This is sample XHTML which is created and/or consumed by the control:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title></title>
 </head>
 <body>
  <h1>Sample programs</h1>
  <h2>Support</h2>
  <p>Please contact me (the author) at <a href="mailto:modeltext2018 @gmail.com">modeltext2018@gmail.com</a> to say whether you like this software, to make suggestions, to ask questions, and any/or for bug reports. For further details, see also the <a href="http://www.modeltext.com/contact">Contact</a> page.</p>
  <h2>How to</h2>
  <p>Here are some notes about how I wrote the sample programs (for example, the FileOpenAndSave project):</p>
  <ul>
   <li>Use Visual Studio to create a new, empty Windows Forms Application.</li>
   <li>Use the Visual Studio Designer, to design the layout of the form: the form for this example project simply includes one application menu strip, plus a panel on which the ModelText HTML control is superimposed at run-time. Also use the Visual Studio Designer to define the menu items, and to declare the events handlers which implement each menu item.</li>
   <li>Read <a href="http://www.modeltext.com/html/apis">APIs for the HTML Control</a> for a description of how to use the ModelText HTML control, and add the corresponding statements to the Form1.cs source file.</li>
  </ul>
  <h2>List of samples</h2>
  <p>There are two sample programs:</p>
  <table>
   <tr>
    <td>FileOpenAndSave</td>
    <td>This program shows how to include the following functionality:
     <ul>
      <li>Load and save a document</li>
      <li>Implement the 'Save' and 'Insert Hyperlink' commands</li>
      <li>Implement your own, custom, edit command (e.g. 'Merge Paragraphs')</li>
     </ul>
    </td>
   </tr>
   <tr>
    <td>FormControls</td>
    <td>This program shows how to display a form, and get the contents of the form controls when the user clicks the submit button.</td>
   </tr>
  </table>
  <p></p>
 </body>
</html>

User Interface

Here's what that looks like in the control – two images, to show the effect of applying two different CSS to the same document:

Sample screenshot

Sample screenshot