changeset 10537:7b44520c8003 jdk-9+175

8180338: Additional HTML5 cleanup Reviewed-by: jgiles
author kcr
date Thu, 15 Jun 2017 10:32:49 -0700
parents c458f0ceb559
children d04c3870a057 0a309320b6d8
files modules/javafx.fxml/src/main/docs/javafx/fxml/doc-files/faq.html modules/javafx.fxml/src/main/docs/javafx/fxml/doc-files/introduction_to_fxml.html modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html
diffstat 3 files changed, 266 insertions(+), 347 deletions(-) [+]
line wrap: on
line diff
--- a/modules/javafx.fxml/src/main/docs/javafx/fxml/doc-files/faq.html	Mon Jun 12 22:58:51 2017 +0530
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,85 +0,0 @@
-<!--
-/*
- * Copyright (c) 2017, Oracle and/or its affiliates. All rights reserved.
- * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
- *
- * This code is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License version 2 only, as
- * published by the Free Software Foundation.  Oracle designates this
- * particular file as subject to the "Classpath" exception as provided
- * by Oracle in the LICENSE file that accompanied this code.
- *
- * This code is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
- * version 2 for more details (a copy is included in the LICENSE file that
- * accompanied this code).
- *
- * You should have received a copy of the GNU General Public License version
- * 2 along with this work; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
- *
- * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
- * or visit www.oracle.com if you need additional information or have any
- * questions.
- */
--->
-
-<html>
-    <head>
-        <link href="fxml.css" rel="stylesheet"/>
-        <title>FXML FAQ</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
-    </head>
-
-<body>
-<h1>FXML FAQ</h1>
-<p class="subtitle">Last updated: 1/24/2013</p>
-
-<h2>Contents</h2>
-<ol class="contents">
-    <li><a href="#fxmlfactory_network_requests"</a>FXMLLoader shows unexpected network requests in webstart.</li>
-    <li><a href="#setroot_required">Setting root for &lt;fx:root&gt; is required.</a></li>
-    <li><a href="#list_and_arrays_initialization">Can list and array be initialized from an attribute?</a></li>
-    <li><a href="#prefixes_in_list_and_arrays_initialization">Can prefixes '$', '@', '%' be used in list and arrays initialization?</a></li>
-    <li><a href="#dynamic_event_handler">Could be event handler dynamically changed?</a></li>
-</ol>
-
-<ol>
-<li><h4><a name="fxmlloader_network_requests">FXMLLoader shows unexpected network requests in webstart.</a></h4>
-<p>XMLInputFactory looks up its current implementation class name in <span class="code">META-INF/services/javax.xml.stream.XMLInputFactory</span>. If such entry exists in one of application jars the request to the server doesn't happen because the resource is already available from loaded jar.
-    Create an empty file <span class="code">META-INF/services/javax.xml.stream.XMLInputFactory</span> and package it within your application. Factory finder will then get the file but because it is empty providerId==null which causes fallback to the default implementation of <span class="code">XMLInputFactory</span> on jre bootclasspath. </p></li>
-
-<li><h4><a name="setroot_required">Setting root for &lt;fx:root&gt; is required.</a></h4>
-    <p>Look at description of <a href="introduction_to_fxml.html#custom_components">custom components</a>. Setting root before loading fxml file wasn't required. Root was created and set if custom component had default constructor. To be consistent with documentation <span class="code">setRoot()</span> is always required before loading fxml file.</p></li>
-
-<li><h4><a name="list_and_arrays_initialization">Can list and array be initialized from an attribute?</a></h4>
-<p>FXMLLoader is able to initialize list or array property from a string value containing ',' (comma) delimited tokens.
-<pre class="code">
-&lt;VBox stylesheets="style1.css,style2.css,style3.css"/&gt;
-</pre>
-</p></li>
-<li><h4><a name="prefixes_in_list_and_arrays_initialization">Can prefixes '$', '@', '%' be used in list and arrays initialization?</a></h4>
-    <p>FXMLLoader is able to set a list or an array property from a value containing string tokens delimited by "," (list="a, b, c, d"). It can resolve properly tokens prefixed with "@", "%" or "\"
-Something like this list_property="%resource1, %resource2, ..." or stylesheets="@style1.css, @style2.css, ..." where % is resource and @ is relative path.
-</p></li>
-
-<li><h4><a name="dynamic_event_handler">Could be event handler dynamically changed?</a></h4>
-    <p>If you want to wire in events into the FXML elements the event needs to come from the controller or from the embedded scripts. This has been extended so that fxmloader looks to the namespace for event handler.</p>
-    How to put event handler implementation into namespace:
-    <pre class="code">
-     fxmlLoader.getNamespace().put("manualAction", new EventHandler<PropertyChangeEvent<String>>() {
-            public void handle(PropertyChangeEvent<String> stringPropertyChangeEvent) {
-                //handle code here
-            }
-        });
-    </pre>      
-    Reference event handler in fxml:
-    <pre class="code">
-        &lt;Widget onNameChange="$manualAction"/&gt;
-    </pre>
-</li>
-
-</ol>
-</body>
-</html>
--- a/modules/javafx.fxml/src/main/docs/javafx/fxml/doc-files/introduction_to_fxml.html	Mon Jun 12 22:58:51 2017 +0530
+++ b/modules/javafx.fxml/src/main/docs/javafx/fxml/doc-files/introduction_to_fxml.html	Thu Jun 15 10:32:49 2017 -0700
@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!doctype html>
 
 <!--
 /*
@@ -27,9 +27,9 @@
  */
 -->
 
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">    
+<html lang="en">
 <head>
-<link href="fxml.css" rel="stylesheet"/>    
+<link href="fxml.css" type="text/css" rel="stylesheet"/>    
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Introduction to FXML | JavaFX 9</title>
 <meta name="description" content="The document introduces FXML, an XML-based declarative markup language for defining user interfaces in JavaFX 9 applications."/>
@@ -119,12 +119,12 @@
 <li><a href="#deploy_as_module">Deploying an Application as a Module</a></li>
 </ul>
 
-<h2><a name="overview">Overview</a></h2>
+<h2><a id="overview">Overview</a></h2>
 <p>FXML is a scriptable, XML-based markup language for constructing Java object graphs. It provides a convenient alternative to constructing such graphs in procedural code, and is ideally suited to defining the user interface of a JavaFX application, since the hierarchical structure of an XML document closely parallels the structure of the JavaFX scene graph.</p>
 
 <p>This document introduces the FXML markup language and explains how it can be used to simplify development of JavaFX applications.</p>
 
-<h2><a name="elements">Elements</a></h2>
+<h2><a id="elements">Elements</a></h2>
 <p>In FXML, an XML element represents one of the following:</p>
 <ul>
 <li>A class instance</li>
@@ -136,13 +136,13 @@
 
 <p>Class instances, instance properties, static properties, and define blocks are discussed in this section below. Scripting is discussed in a later section.</p>
 
-<h3><a name="class_instance_elements">Class Instance Elements</a></h3>
+<h3><a id="class_instance_elements">Class Instance Elements</a></h3>
 <p>Class instances can be constructed in FXML in several ways. The most common is via instance declaration elements, which simply create a new instance of a class by name. Other ways of creating class instances include referencing existing values, copying existing values, and including external FXML files. Each is discussed in more detail below.</p>
 
-<h4><a name="instance_declaration_elements">Instance Declarations</a></h4>
-<p><assert id="instance_declaration" group="instance_declarations">If an element's tag is considered an instance declaration if the tag begins with uppercase letter (and the class is imported)</assert> or, as in Java, <assert id="fully_qualified_name" group="instance_declarations">it denotes a fully-qualified (including the package name) name of a class.</assert> When the FXML loader (also introduced later) encounters such an element, it creates an instance of that class.</p>
+<h4><a id="instance_declaration_elements">Instance Declarations</a></h4>
+<p>If an element's tag is considered an instance declaration if the tag begins with uppercase letter (and the class is imported) or, as in Java, it denotes a fully-qualified (including the package name) name of a class. When the FXML loader (also introduced later) encounters such an element, it creates an instance of that class.</p>
 
-<p><assert id="import" group="instance_declarations">Importing a class is done using the "import" processing instruction (PI). For example, the following PI imports the <span class="code">javafx.scene.control.Label</span> class into the current FXML document’s namespace:</p>
+<p>Importing a class is done using the "import" processing instruction (PI). For example, the following PI imports the <span class="code">javafx.scene.control.Label</span> class into the current FXML document&#8217;s namespace:</p>
 
 <pre class="code">
 &lt;?import javafx.scene.control.Label?&gt;
@@ -153,30 +153,30 @@
 <pre class="code">
 &lt;?import javafx.scene.control.*?&gt;
 </pre>
-</assert>
 
-<p><assert id="instantiation_java_bean" group="instance_declarations">Any class that adheres to JavaBean constructor and property naming conventions can be readily instantiated and configured using FXML.</assert> The following is a simple but complete example that creates an instance of <span class="code">javafx.scene.control.Label</span> and sets its "text" property to "Hello, World!":</p>
+
+<p>Any class that adheres to JavaBean constructor and property naming conventions can be readily instantiated and configured using FXML. The following is a simple but complete example that creates an instance of <span class="code">javafx.scene.control.Label</span> and sets its "text" property to "Hello, World!":</p>
 
 <pre class="code">
 &lt;?import javafx.scene.control.Label?&gt;
 &lt;Label text="Hello, World!"/&gt;
 </pre>
 
-<p>Note that the <span class="code">Label</span>’s "text" property in this example is set using an XML attribute. Properties can also be set using nested property elements. Property elements are discussed in more detail later in this section. Property attributes are discussed in a later section.</p>
+<p>Note that the <span class="code">Label</span>&#8217;s "text" property in this example is set using an XML attribute. Properties can also be set using nested property elements. Property elements are discussed in more detail later in this section. Property attributes are discussed in a later section.</p>
 
 <p>Classes that don't conform to Bean conventions can also be constructed in FXML, using an object called a "builder". Builders are discussed in more detail later.</p>
 
 <h5>Maps</h5>
 <p>Internally, the FXML loader uses an instance of <span class="code">com.sun.javafx.fxml.BeanAdapter</span> to wrap an instantiated object and invoke its setter methods. This (currently) private class implements the <span class="code">java.util.Map</span> interface and allows a caller to get and set Bean property values as key/value pairs.</p>
 
-<p><assert id="map_instantiaton" group="instance_declarations">If an element represents a type that already implements <span class="code">Map</span> (such as <span class="code">java.util.HashMap</span>), it is not wrapped and its <span class="code">get()</span> and <span class="code">put()</span> methods are invoked directly.</assert> For example, the following FXML creates an instance of <span class="code">HashMap</span> and sets its "foo" and "bar" values to "123" and "456", respectively:
+<p>If an element represents a type that already implements <span class="code">Map</span> (such as <span class="code">java.util.HashMap</span>), it is not wrapped and its <span class="code">get()</span> and <span class="code">put()</span> methods are invoked directly. For example, the following FXML creates an instance of <span class="code">HashMap</span> and sets its "foo" and "bar" values to "123" and "456", respectively:
 
 <pre class="code">
 &lt;HashMap foo="123" bar="456"/&gt;
 </pre>
 
 <h5>fx:value</h5>
-<p><assert id="instantiation_no_default_constructor" group="instance_declarations">The <span class="code">fx:value</span> attribute can be used to initialize an instance of a type that does not have a default constructor but provides a static <span class="code">valueOf(String)</span> method.</assert> For example, <span class="code">java.lang.String</span> as well as each of the primitive wrapper types define a <span class="code">valueOf()</span> method and can be constructed in FXML as follows:</p>
+<p>The <span class="code">fx:value</span> attribute can be used to initialize an instance of a type that does not have a default constructor but provides a static <span class="code">valueOf(String)</span> method. For example, <span class="code">java.lang.String</span> as well as each of the primitive wrapper types define a <span class="code">valueOf()</span> method and can be constructed in FXML as follows:</p>
 
 <pre class="code">
 &lt;String fx:value="Hello, World!"/&gt;
@@ -187,7 +187,7 @@
 <p>Custom classes that define a static <span class="code">valueOf(String)</span> method can also be constructed this way.</p>
 
 <h5>fx:factory</h5>
-<p><assert id="instantiation_factory" group="instance_declarations">The <span class="code">fx:factory</span> attribute is another means of creating objects whose classes do not have a default constructor. The value of the attribute is the name of a static, no-arg factory method for producing class instances.</assert> For example, the following markup creates an instance of an observable array list, populated with three string values:</p>
+<p>The <span class="code">fx:factory</span> attribute is another means of creating objects whose classes do not have a default constructor. The value of the attribute is the name of a static, no-arg factory method for producing class instances. For example, the following markup creates an instance of an observable array list, populated with three string values:</p>
 
 <pre class="code">
 &lt;FXCollections fx:factory="observableArrayList"&gt;
@@ -198,7 +198,7 @@
 </pre>
 
 <h5>Builders</h5>
-<p><assert id="instantiation_builder" group="instance_declarations">A third means of creating instances of classes that do not conform to Bean conventions (such as those representing immutable values) is a "builder".</assert> The builder design pattern delegates object construction to a mutable helper class (called a "builder") that is responsible for manufacturing instances of the immutable type.</p>
+<p>A third means of creating instances of classes that do not conform to Bean conventions (such as those representing immutable values) is a "builder". The builder design pattern delegates object construction to a mutable helper class (called a "builder") that is responsible for manufacturing instances of the immutable type.</p>
 
 <p>Builder support in FXML is provided by two interfaces. The <span class="code">javafx.util.Builder</span> interface defines a single method named <span class="code">build()</span> which is responsible for constructing the actual object:</p>
 
@@ -236,14 +236,14 @@
 
 <p>When processing markup for an object that will be constructed by a builder, the <span class="code">Builder</span> instances are treated like value objects - if a <span class="code">Builder</span> implements the <span class="code">Map</span> interface, the <span class="code">put()</span> method is used to set the builder's attribute values. Otherwise, the builder is wrapped in a <span class="code">BeanAdapter</span> and its properties are assumed to be exposed via standard Bean setters.</p>
 
-<h4><a name="include_elements">&lt;fx:include&gt;</a></h4>
+<h4><a id="include_elements">&lt;fx:include&gt;</a></h4>
 <p>The <span class="code">&lt;fx:include&gt;</span> tag creates an object from FXML markup defined in another file. It is used as follows:</p>
 
 <pre class="code">
 &lt;fx:include source="<span class="variable">filename</span>"/&gt;
 </pre>
 
-<p>where <span class="variable">filename</span> is the name of the FXML file to include. <assert id="include_leading_slash_character" group="instance_declarations">Values that begin with a leading slash character are treated as relative to the classpath.</assert> <assert id="include_no_leading_slash_character" group="instance_declarations">Values with no leading slash are considered relative to the path of the current document.</assert></p>
+<p>where <span class="variable">filename</span> is the name of the FXML file to include. Values that begin with a leading slash character are treated as relative to the classpath. Values with no leading slash are considered relative to the path of the current document.</p>
 
 <p>For example, given the following markup:</p>
 
@@ -274,8 +274,8 @@
 &lt;fx:include source="<span class="variable">filename</span>" resources="<span class="variable">resource_file</span>" charset="utf-8"/&gt;
 </pre>
 
-<h4><a name="constant_elements">&lt;fx:constant&gt;</a></h4>
-<p><assert id="constant" group="instance_declarations">The <span class="code">&lt;fx:constant&gt;</span> element creates a reference to a class constant.</assert> For example, the following markup sets the value of the "minWidth" property of a<span class="code">Button</span> instance to the value of the <span class="code">NEGATIVE_INFINITY</span> constant defined by the <span class="code">java.lang.Double</span> class:</p>
+<h4><a id="constant_elements">&lt;fx:constant&gt;</a></h4>
+<p>The <span class="code">&lt;fx:constant&gt;</span> element creates a reference to a class constant. For example, the following markup sets the value of the "minWidth" property of a<span class="code">Button</span> instance to the value of the <span class="code">NEGATIVE_INFINITY</span> constant defined by the <span class="code">java.lang.Double</span> class:</p>
 
 <pre class="code">
 &lt;Button&gt;
@@ -283,8 +283,8 @@
 &lt;/Button&gt;
 </pre>
 
-<h4><a name="reference_elements">&lt;fx:reference&gt;</a></h4>
-<p><assert id="reference" group="instance_declarations">The <span class="code">&lt;fx:reference&gt;</span> element creates a new reference to an existing element.</assert> Wherever this tag appears, it will effectively be replaced by the value of the named element. It is used in conjunction with either the <span class="code">fx:id</span> attribute or with a script variables, both of which are discussed in more detail in later sections. The "source" attribute of the <span class="code">&lt;fx:reference&gt;</span> element specifies the name of the object to which the new element will refer.</p>
+<h4><a id="reference_elements">&lt;fx:reference&gt;</a></h4>
+<p>The <span class="code">&lt;fx:reference&gt;</span> element creates a new reference to an existing element. Wherever this tag appears, it will effectively be replaced by the value of the named element. It is used in conjunction with either the <span class="code">fx:id</span> attribute or with a script variables, both of which are discussed in more detail in later sections. The "source" attribute of the <span class="code">&lt;fx:reference&gt;</span> element specifies the name of the object to which the new element will refer.</p>
 
 <p>For example, the following markup assigns a previously-defined <span class="code">Image</span> instance named "myImage" to the "image" property of an <span class="code">ImageView</span> control:</p>
 
@@ -308,15 +308,15 @@
 
 <p>For most other cases, using an attribute is simpler and more concise.</p>
 
-<h4><a name="copy_elements">&lt;fx:copy&gt;</a></h4>
-<p><assert id="copy" group="instance_declarations">The <span class="code">&lt;fx:copy&gt;</span> element creates a copy of an existing element.</assert> Like <span class="code">&lt;fx:reference&gt;</span>, it is used with the fx:id attribute or a script variable. The element's "source" attribute specifies the name of the object that will be copied. The source type must define a copy constructor that will be used to construct the copy from the source value.</p>
+<h4><a id="copy_elements">&lt;fx:copy&gt;</a></h4>
+<p>The <span class="code">&lt;fx:copy&gt;</span> element creates a copy of an existing element. Like <span class="code">&lt;fx:reference&gt;</span>, it is used with the fx:id attribute or a script variable. The element's "source" attribute specifies the name of the object that will be copied. The source type must define a copy constructor that will be used to construct the copy from the source value.</p>
 
 <p>At the moment, no JavaFX platform classes provide such a copy constructor, so this element is provided primarily for use by application developers. This may change in a future release.</p>
 
-<h4><a name="root_elements">&lt;fx:root&gt;</a></h4>
-<p><assert id="root" group="instance_declarations">The <span class="code">&lt;fx:root&gt;</span> element creates a reference to a previously defined root element. It is only valid as the root node of an FXML document.</assert> <span class="code">&lt;fx:root&gt;</span> is used primarily when creating custom controls that are backed by FXML markup. This is discussed in more detail in the <a href="#fxmlloader">FXMLLoader</a> section.</p>
+<h4><a id="root_elements">&lt;fx:root&gt;</a></h4>
+<p>The <span class="code">&lt;fx:root&gt;</span> element creates a reference to a previously defined root element. It is only valid as the root node of an FXML document. <span class="code">&lt;fx:root&gt;</span> is used primarily when creating custom controls that are backed by FXML markup. This is discussed in more detail in the <a href="#fxmlloader">FXMLLoader</a> section.</p>
 
-<h3><a name="property_elements">Property Elements</a></h3>
+<h3><a id="property_elements">Property Elements</a></h3>
 <p>Elements whose tag names begin with a lowercase letter represent object properties. A property element may represent one of the following:</p>
 
 <ul>
@@ -325,8 +325,8 @@
 <li>A read-only map property</li>
 </ul>
 
-<h4><a name="property_setter_elements">Property Setters</a></h4>
-<p><assert id="property_setter" group="property_elements">If an element represents a property setter, the contents of the element (which must be either a text node or a nested class instance element) are passed as the value to the setter for the property.</assert></p>
+<h4><a id="property_setter_elements">Property Setters</a></h4>
+<p>If an element represents a property setter, the contents of the element (which must be either a text node or a nested class instance element) are passed as the value to the setter for the property.</p>
 
 <p>For example, the following FXML creates an instance of the <span class="code">Label</span> class and sets the value of the label's "text" property to "Hello, World!":</p>
 
@@ -347,12 +347,12 @@
 <p>Property elements are generally used when the property value is a complex type that can't be represented using a simple string-based attribute value, or when the character length of the value is so long that specifying it as an attribute would have a negative impact on readability.</p>
 
 <h5>Type Coercion</h5>
-<p><assert id="coercion" group="property_elements">FXML uses "type coercion" to convert property values to the appropriate type as needed.</assert> Type coercion is required because the only data types supported by XML are elements, text, and attributes (whose values are also text). However, Java supports a number of different data types including built-in primitive value types as well as extensible reference types.</p>
+<p>FXML uses "type coercion" to convert property values to the appropriate type as needed. Type coercion is required because the only data types supported by XML are elements, text, and attributes (whose values are also text). However, Java supports a number of different data types including built-in primitive value types as well as extensible reference types.</p>
 
 <p>The FXML loader uses the <span class="code">coerce()</span> method of <span class="code">BeanAdapter</span> to perform any required type conversions. This method is capable of performing basic primitive type conversions such as <span class="code">String</span> to <span class="code">boolean</span> or <span class="code">int</span> to <span class="code">double</span>, and will also convert <span class="code">String</span> to <span class="code">Class</span> or <span class="code">String</span> to <span class="code">Enum</span>. Additional conversions can be implemented by defining a static <span class="code">valueOf()</span> method on the target type.</p>
 
-<h4><a name="read_only_list_property_elements">Read-Only List Properties</a></h4>
-<p><assert id="read_only_list_property" group="property_elements">A read-only list property is a Bean property whose getter returns an instance of <span class="code">java.util.List</span> and has no corresponding setter method. The contents of a read-only list element are automatically added to the list as they are processed.</assert></p>
+<h4><a id="read_only_list_property_elements">Read-Only List Properties</a></h4>
+<p>A read-only list property is a Bean property whose getter returns an instance of <span class="code">java.util.List</span> and has no corresponding setter method. The contents of a read-only list element are automatically added to the list as they are processed.</p>
 
 <p>For example, the "children" property of <span class="code">javafx.scene.Group</span> is a read-only list property representing the group's child nodes:</p>
 
@@ -370,8 +370,8 @@
 
 <p>As each sub-element of the <span class="code">&lt;children&gt;</span> element is read, it is added to the list returned by <span class="code">Group#getChildren()</span>.
 
-<h4><a name="read_only_map_property_elements">Read-Only Map Properties</a></h4>
-<p><assert id="read_only_map_property" group="property_elements">A read-only map property is a bean property whose getter returns an instance of <span class="code">java.util.Map</span> and has no corresponding setter method. The attributes of a read-only map element are applied to the map when the closing tag is processed.</assert></p>
+<h4><a id="read_only_map_property_elements">Read-Only Map Properties</a></h4>
+<p>A read-only map property is a bean property whose getter returns an instance of <span class="code">java.util.Map</span> and has no corresponding setter method. The attributes of a read-only map element are applied to the map when the closing tag is processed.</p>
 
 <p>The "properties" property of <span class="code">javafx.scene.Node</span> is an example of a read-only map property. The following markup sets the "foo" and "bar" properties of a <span class="code">Label</span> instance to "123" and "456", respectively:</p>
 
@@ -382,10 +382,10 @@
 &lt;/Button&gt;
 </pre>
 
-<p><assert id="read_only_property_type_treating" group="property_elements">Note that a read-only property whose type is neither a <span class="code">List</span> nor a <span class="code">Map</span> will be treated as if it were a read-only map. The return value of the getter method will be wrapped in a <span class="code">BeanAdapter</span> and can be used in the same way as any other read-only map.</assert></p>
+<p>Note that a read-only property whose type is neither a <span class="code">List</span> nor a <span class="code">Map</span> will be treated as if it were a read-only map. The return value of the getter method will be wrapped in a <span class="code">BeanAdapter</span> and can be used in the same way as any other read-only map.</p>
 
-<h4><a name="default_properties">Default Properties</a></h4>
-<p><assert id="default_property" group="property_elements">A class may define a "default property" using the <span class="code">@DefaultProperty</span> annotation defined in the <span class="code">javafx.beans</span> package. If present, the sub-element representing the default property can be omitted from the markup.</assert></p>
+<h4><a id="default_properties">Default Properties</a></h4>
+<p>A class may define a "default property" using the <span class="code">@DefaultProperty</span> annotation defined in the <span class="code">javafx.beans</span> package. If present, the sub-element representing the default property can be omitted from the markup.</p>
 
 <p>For example, since <span class="code">javafx.scene.layout.Pane</span> (the superclass of <span class="code">javafx.scene.layout.VBox</span>) defines a default property of "children", a <span class="code">&lt;children&gt;</span> element is not required; the loader will automatically add the sub-elements of the <span class="code">VBox</span> to the container's "children" collection:</p>
 
@@ -410,8 +410,8 @@
 
 <p>Taking advantage of default properties can significantly reduce the verbosity of FXML markup.</p>
 
-<h3><a name="static_property_elements">Static Properties</a></h3>
-<p><assert id="static_property" group="elements">An element may also represent a "static" property (sometimes called an "attached property"). Static properties are properties that only make sense in a particular context. They are not intrinsic to the class to which they are applied, but are defined by another class (often, the parent container of a control).</assert></p>
+<h3><a id="static_property_elements">Static Properties</a></h3>
+<p>An element may also represent a "static" property (sometimes called an "attached property"). Static properties are properties that only make sense in a particular context. They are not intrinsic to the class to which they are applied, but are defined by another class (often, the parent container of a control).</p>
 
 <p>Static properties are prefixed with the name of class that defines them. For example, The following FXML invokes the static setter for <span class="code">GridPane</span>'s "rowIndex" and "columnIndex" properties:</p>
 
@@ -440,12 +440,13 @@
 gridPane.getChildren().add(label);
 </pre>
 
+<p>
 The calls to <span class="code">GridPane#setRowIndex()</span> and <span class="code">GridPane#setColumnIndex()</span> "attach" the index data to the <span class="code">Label</span> instance. <span class="code">GridPane</span> then uses these during layout to arrange its children appropriately. Other containers, including <span class="code">AnchorPane</span>, <span class="code">BorderPane</span>, and <span class="code">StackPane</span>, define similar properties.</p>
 
 <p>As with instance properties, static property elements are generally used when the property value cannot be efficiently represented by an attribute value. Otherwise, static property attributes (discussed in a later section) will generally produce more concise and readable markup.</p>
 
-<h3><a name="define_elements">Define Blocks</a></h3>
-<p><assert id="define" group="elements">The <span class="code">&lt;fx:define&gt;</span> element is used to create objects that exist outside of the object hierarchy but may need to be referred to elsewhere.</assert></p>
+<h3><a id="define_elements">Define Blocks</a></h3>
+<p>The <span class="code">&lt;fx:define&gt;</span> element is used to create objects that exist outside of the object hierarchy but may need to be referred to elsewhere.</p>
 
 <p>For example, when working with radio buttons, it is common to define a <span class="code">ToggleGroup</span> that will manage the buttons' selection state. This group is not part of the scene graph itself, so should not be added to the buttons' parent. A define block can be used to create the button group without interfering with the overall structure of the document:</p>
 
@@ -464,7 +465,7 @@
 
 <p>Elements in define blocks are usually assigned an ID that can be used to refer to the element's value later. IDs are discussed in more detail in later sections.</p>
 
-<h2><a name="attributes">Attributes</a></h2>
+<h2><a id="attributes">Attributes</a></h2>
 <p>An attribute in FXML may represent one of the following:</p>
 <ul>
 <li>A property of a class instance</li>
@@ -474,15 +475,15 @@
 
 <p>Each are discussed in more detail in the following sections.</p>
 
-<h3><a name="instance_property_attributes">Instance Properties</a></h3>
-<p><assert id="instance_properties" group="instance_properties">Like property elements, attributes can also be used to configure the properties of a class instance.</assert> For example, the following markup creates a <span class="code">Button</span> whose text reads "Click Me!":</p>
+<h3><a id="instance_property_attributes">Instance Properties</a></h3>
+<p>Like property elements, attributes can also be used to configure the properties of a class instance. For example, the following markup creates a <span class="code">Button</span> whose text reads "Click Me!":</p>
 
 <pre class="code">
 &lt;?import javafx.scene.control.*?&gt;
 &lt;Button text="Click Me!"/&gt;
 </pre>
 
-<p><assert id="attributes_type_coercion" group="instance_properties">As with property elements, property attributes support type coercion.</assert> When the following markup is processed, the "x", "y", "width", and "height" values will be converted to doubles, and the "fill" value will be converted to a <span class="code">Color</span>:</p>
+<p>As with property elements, property attributes support type coercion. When the following markup is processed, the "x", "y", "width", and "height" values will be converted to doubles, and the "fill" value will be converted to a <span class="code">Color</span>:</p>
 
 <pre class="code">
 &lt;Rectangle fx:id="rectangle" x="10" y="10" width="320" height="240"
@@ -499,8 +500,8 @@
 <li>Variable resolution</li>
 </ul>
 
-<h4><a name="location_resolution">Location Resolution</a></h4>
-<p><assert id="location_resolution" group="instance_properties">As strings, XML attributes cannot natively represent typed location information such as a URL. However, it is often necessary to specify such locations in markup; for example, the source of an image resource. The location resolution operator (represented by an "@" prefix to the attribute value) is used to specify that an attribute value should be treated as a location relative to the current file rather than a simple string.</assert></p>
+<h4><a id="location_resolution">Location Resolution</a></h4>
+<p>As strings, XML attributes cannot natively represent typed location information such as a URL. However, it is often necessary to specify such locations in markup; for example, the source of an image resource. The location resolution operator (represented by an "@" prefix to the attribute value) is used to specify that an attribute value should be treated as a location relative to the current file rather than a simple string.</p>
 
 <p>For example, the following markup creates an ImageView and populates it with image data from <span class="filename">my_image.png</span>, which is assumed to be located at a path relative to the current FXML file:</p>
 
@@ -532,8 +533,8 @@
 &lt;Image url="@My Image.png"/&gt;
 </pre>
 
-<h4><a name="resource_resolution">Resource Resolution</a></h4>
-<assert id="resource_resolution" group="instance_properties">
+<h4><a id="resource_resolution">Resource Resolution</a></h4>
+
 <p>In FXML, resource substitution can be performed at load time for localization purposes. When provided with an instance of <span class="code">java.util.ResourceBundle</span>, the FXML loader will replace instances of resource names with their locale-specific values. Resource names are identified by a "%" prefix, as shown below:</p>
 
 <pre class="code">
@@ -545,12 +546,12 @@
 <pre class="code">
 myText = This is the text!
 </pre>
-</assert>
+
 
 <p>the output of the FXML loader would be a <span class="code">Label</span> instance containing the text "This is the text!".</p>
 
-<h4><a name="variable_resolution">Variable Resolution</a></h4>
-<p><assert id="variable_resolution" group="instance_properties">An FXML document defines a variable namespace in which named elements and script variables may be uniquely identified. The variable resolution operator allows a caller to replace an attribute value with an instance of a named object before the corresponding setter method is invoked. Variable references are identified by a "$" prefix</assert>, as shown below:</p>
+<h4><a id="variable_resolution">Variable Resolution</a></h4>
+<p>An FXML document defines a variable namespace in which named elements and script variables may be uniquely identified. The variable resolution operator allows a caller to replace an attribute value with an instance of a named object before the corresponding setter method is invoked. Variable references are identified by a "$" prefix, as shown below:</p>
 
 <pre class="code">
 &lt;fx:define&gt;
@@ -562,20 +563,20 @@
 &lt;RadioButton text="C" toggleGroup="$myToggleGroup"/&gt;
 </pre>
 
-<p><assert id="assigning_id" group="instance_properties">Assigning an <span class="code">fx:id</span> value to an element creates a variable in the document's namespace that can later be referred to by variable dereference attributes, such as the "toggleGroup" attribute shown above, or in script code, discussed in a later section. Additionally, if the object's type defines an "id" property, this value will also be passed to the objects <span class="code">setId()</span> method.</assert></p>
+<p>Assigning an <span class="code">fx:id</span> value to an element creates a variable in the document's namespace that can later be referred to by variable dereference attributes, such as the "toggleGroup" attribute shown above, or in script code, discussed in a later section. Additionally, if the object's type defines an "id" property, this value will also be passed to the objects <span class="code">setId()</span> method.</p>
 
-<h4><a name="escape_sequences">Escape Sequences</a></h4>
+<h4><a id="escape_sequences">Escape Sequences</a></h4>
 
-<p><assert id="escape_sequences" group="instance_properties">If the value of an attribute begins with one of the resource resolution prefixes, the character can be escaped by prepending it with a leading backslash ("\") character.</assert> For example, the following markup creates a <span class="code">Label</span> instance whose text reads "$10.00":</p>
+<p>If the value of an attribute begins with one of the resource resolution prefixes, the character can be escaped by prepending it with a leading backslash ("\") character. For example, the following markup creates a <span class="code">Label</span> instance whose text reads "$10.00":</p>
 
 <pre class="code">
 &lt;Label text="\$10.00"/&gt;
 </pre>
 
-<h4><a name="expression_binding">Expression Binding</a></h4>
+<h4><a id="expression_binding">Expression Binding</a></h4>
 <p>Attribute variables as shown above are resolved once at load time. Later updates to the variables value are not automatically reflected in any properties to which the value was assigned. In many cases, this is sufficient; however, it is often convenient to "bind" a property value to a variable or expression such that changes to the variable are automatically propagated to the target property. Expression bindings can be used for this purpose.</p>
 
-<p><assert id="expression_binding" group="instance_properties">An expression binding also begins with the variable resolution operator, but is followed by a set of curly braces which wrap the expression value.</assert> For example, the following markup binds the value of a text input's "text" property to the "text" property of a <span class="code">Label</span> instance:</p>
+<p>An expression binding also begins with the variable resolution operator, but is followed by a set of curly braces which wrap the expression value. For example, the following markup binds the value of a text input's "text" property to the "text" property of a <span class="code">Label</span> instance:</p>
 
 <pre class="code">
 &lt;TextField fx:id="textField"/&gt;
@@ -587,6 +588,7 @@
 <p>More complex expression are also supported. A list of supported constants and operators follows:</p>
 
 <table>
+ <caption>Constants and Operators Table</caption>
  <tr><td>"string"<br />'string'</td><td>A string constant</td></tr>
  <tr><td>true<br />false</td><td>A boolean constant</td></tr>
  <tr><td>null</td><td>A constant representing the null value</td></tr>
@@ -596,15 +598,15 @@
  <tr><td>+ - <br />
  			* /
  			%</td> <td>Numerical binary operators</td></tr>
- <tr><td>&& ||</td><td>Boolean binary operators</td></tr>
+ <tr><td>&amp;&amp; ||</td><td>Boolean binary operators</td></tr>
  <tr><td>&gt; &gt;= <br />
  		   &lt; &lt;= <br />
  		   == !=</td>
  		   <td>Binary operators of comparison.<br/> Both arguments must be of type Comparable</td></tr>
 </table>
 
-<h3><a name="static_property_attributes">Static Properties</a></h3>
-<p><assert id="static_property_attributes" group="attributes">Attributes representing static properties are handled similarly to static property elements and use a similar syntax.</assert> For example, the earlier <span class="code">GridPane</span> markup shown earlier to demonstrate static property elements could be rewritten as follows:</p>
+<h3><a id="static_property_attributes">Static Properties</a></h3>
+<p>Attributes representing static properties are handled similarly to static property elements and use a similar syntax. For example, the earlier <span class="code">GridPane</span> markup shown earlier to demonstrate static property elements could be rewritten as follows:</p>
 
 <pre class="code">
 &lt;GridPane&gt;
@@ -614,15 +616,15 @@
 &lt;/TabPane&gt;
 </pre>
 
-<p><assert id="static_property_attributes_use" group="attributes">In addition to being more concise, static property attributes, like instance property attributes, support location, resource, and variable resolution operators, the only limitation being that it is not possible to create an expression binding to a static property.</assert></p>
+<p>In addition to being more concise, static property attributes, like instance property attributes, support location, resource, and variable resolution operators, the only limitation being that it is not possible to create an expression binding to a static property.</p>
 
-<h3><a name="event_handler_attributes">Event Handlers</a></h3>
+<h3><a id="event_handler_attributes">Event Handlers</a></h3>
 <p>Event handler attributes are a convenient means of attaching behaviors to document elements. Any class that defines a <span class="code">setOn<span class="variable">Event</span>()</span> method can be assigned an event handler in markup.</p>
 
 <p>FXML supports three types of event handler attributes: script event handlers, controller method event handlers and expressions. Each are discussed below.</p>
 
-<h4><a name="script_event_handlers">Script Event Handlers</a></h4>
-<p><assert id="script_event_handlers" group="event_handlers">A script event handler is an event handler that executes script code when the event is fired, similar to event handlers in HTML.</assert> For example, the following script-based handler for the button's "onAction" event uses JavaScript to write the text "You clicked me!" to the console when the user presses the button:</p>
+<h4><a id="script_event_handlers">Script Event Handlers</a></h4>
+<p>A script event handler is an event handler that executes script code when the event is fired, similar to event handlers in HTML. For example, the following script-based handler for the button's "onAction" event uses JavaScript to write the text "You clicked me!" to the console when the user presses the button:</p>
 
 <pre class="code">
 &lt;?language javascript?&gt;
@@ -636,12 +638,12 @@
 &lt;/VBox&gt;
 </pre>
 
-<p><assert id="language_processing_instruction" group="event_handlers">Note the use of the language processing instruction at the beginning of the code snippet. This PI tells the FXML loader which scripting language should be used to execute the event handler. A page language must be specified whenever inline script is used in an FXML document, and can only be specified once per document. However, this does not apply to external scripts, which may be implemented using any number of supported scripting languages.</assert> Scripting is discussed in more detail in the next section.</p>
+<p>Note the use of the language processing instruction at the beginning of the code snippet. This PI tells the FXML loader which scripting language should be used to execute the event handler. A page language must be specified whenever inline script is used in an FXML document, and can only be specified once per document. However, this does not apply to external scripts, which may be implemented using any number of supported scripting languages. Scripting is discussed in more detail in the next section.</p>
 
-<h4><a name="controller_method_event_handlers">Controller Method Event Handlers</a></h4>
+<h4><a id="controller_method_event_handlers">Controller Method Event Handlers</a></h4>
 <p>A controller method event handler is a method defined by a document's "controller". A controller is an object that is associated with the deserialized contents of an FXML document and is responsible for coordinating the behaviors of the objects (often user interface elements) defined by the document.</p>
 
-<p><assert id="controller_method_event_handler_specification" group="event_handlers">A controller method event handler is specified by a leading hash symbol followed by the name of the handler method.</assert> For example:</p>
+<p>A controller method event handler is specified by a leading hash symbol followed by the name of the handler method. For example:</p>
 
 <pre class="code">
 &lt;VBox fx:controller="com.foo.MyController"
@@ -652,7 +654,7 @@
 &lt;/VBox&gt;
 </pre>
 
-<p><assert id="controller_attribute" group="event_handlers">Note the use of the <span class="code">fx:controller</span> attribute on the root element. This attribute is used to associate a controller class with the document.</assert> If <span class="code">MyController</span> is defined as follows:</p>
+<p>Note the use of the <span class="code">fx:controller</span> attribute on the root element. This attribute is used to associate a controller class with the document. If <span class="code">MyController</span> is defined as follows:</p>
 
 <pre class="code">
 package com.foo;
@@ -666,7 +668,7 @@
 
 <p>the <span class="code">handleButtonAction()</span> will be called when the user presses the button, and the text "You clicked me!" will be written to the console.</p>
 
-<p><assert id="handler_method_signature" group="event_handlers">In general, a handler method should conform to the signature of a standard event handler; that is, it should take a single argument of a type that extends <span class="code">javafx.event.Event</span> and should return void (similar to an event delegate in C#). The event argument often carries important and useful information about the nature of the event;</assert> <assert id="handler_method_opt_arg" group="event_handlers">however, it is optional and may be omitted if desired</assert>.
+<p>In general, a handler method should conform to the signature of a standard event handler; that is, it should take a single argument of a type that extends <span class="code">javafx.event.Event</span> and should return void (similar to an event delegate in C#). The event argument often carries important and useful information about the nature of the event; however, it is optional and may be omitted if desired.
 So this is also a valid handler:</p>
 
 <pre class="code">
@@ -681,7 +683,7 @@
 
 <p>Controllers are discussed in more detail in a later section.</p>
 
-<h4><a name="expression_handlers">Event handlers from expressions</a></h4>
+<h4><a id="expression_handlers">Event handlers from expressions</a></h4>
 <p>Any expression that point to a <a href="#variable_resolution">variable</a> of javafx.event.EventHandler type
     can be used as an expression handler. </p>
 <p>
@@ -702,7 +704,7 @@
 public class MyController {
     
     @FXML
-    public EventHandler<ActionEvent> onActionHandler = new EventHandler<>() { ... }
+    public EventHandler&lt;ActionEvent&gt; onActionHandler = new EventHandler&lt;&gt;() { ... }
 
     ...
 }  
@@ -711,7 +713,7 @@
 <p> Note that other kinds of expressions, like <a href="#expression_binding">binding expressions</a>
     are not supported in this context. </p>
 
-<h4><a name="collections_and_property_handlers">Special handlers for collections and properties</a></h4>
+<h4><a id="collections_and_property_handlers">Special handlers for collections and properties</a></h4>
 <p> Collections and object properties cannot be listen to using <span class="code">setOn<span class="variable">Event</span>()</span> methods.
     For these reason, special handler methods need to be used.
 <span class="code">ObservableList</span>, <span class="code">ObservableMap</span> or <span class="code">ObservableSet</span>
@@ -763,8 +765,9 @@
     
 <p>Note that collections and properties do not currently support scripting handlers.</p>
 
-<h2><a name="scripting">Scripting</a></h2>
-<assert id="script_tag" group="scripting">The <span class="code">&lt;fx:script&gt;</span> tag allows a caller to import scripting code into or embed script within a FXML file. Any JVM scripting language can be used, including JavaScript, Groovy, and Clojure, among others. Script code is often used to define event handlers directly in markup or in an associated source file, since event handlers can often be written more concisely in more loosely-typed scripting languages than they can in a statically-typed language such as Java.</assert></p>
+<h2><a id="scripting">Scripting</a></h2>
+<p>
+The <span class="code">&lt;fx:script&gt;</span> tag allows a caller to import scripting code into or embed script within a FXML file. Any JVM scripting language can be used, including JavaScript, Groovy, and Clojure, among others. Script code is often used to define event handlers directly in markup or in an associated source file, since event handlers can often be written more concisely in more loosely-typed scripting languages than they can in a statically-typed language such as Java.</p>
 
 <p>For example, the following markup defines a function called <span class="code">handleButtonAction()</span> that is called by the action handler attached to the <span class="code">Button</span> element:</p>
 
@@ -790,7 +793,7 @@
 
 <p>Clicking the button triggers the event handler, which invokes the function, producing output identical to the previous examples.</p>
 
-<p><assert id="external_script_code" group="scripting">Script code may also be defined in external files. The previous example could be split into an FXML file and a JavaScript source file with no difference in functionality</assert>:</p>
+<p>Script code may also be defined in external files. The previous example could be split into an FXML file and a JavaScript source file with no difference in functionality:</p>
 
 <div class="caption">example.fxml</div>
 <pre class="code">
@@ -816,7 +819,7 @@
 
 <p>It is often preferable to separate code from markup in this way, since many text editors support syntax highlighting for the various scripting languages supported by the JVM. It can also help improve readability of the source code and markup.</p>
 
-<assert id="script_blocks_not_limited" group="scripting">
+
 <p>Note that script blocks are not limited to defining event handler functions. Script code is executed as it is processed, so it can also be used to dynamically configure the structure of the resulting output. As a simple example, the following FXML includes a script block that defines a variable named "labelText". The value of this variable is used to populate the text property of a <span class="code">Label</span> instance:</p>
 
 <pre class="code">
@@ -828,7 +831,7 @@
 
 &lt;Label text="$myText"/&gt;
 </pre>
-</assert>
+
 
 <p><strong>Warning:</strong>As of JavaFX 8, <span class="code">importClass()</span> javascript function is no longer supported. You have to use fully qualified names as in the example above or load a nashorn compatibility script.</p>
 
@@ -841,7 +844,7 @@
 }
 </pre> 
 
-<h2><a name="controllers">Controllers</a></h2>
+<h2><a id="controllers">Controllers</a></h2>
 <p>While it can be convenient to write simple event handlers in script, either inline or defined in external files, it is often preferable to define more complex application logic in a compiled, strongly-typed language such as Java. As discussed earlier, the <span class="code">fx:controller</span> attribute allows a caller to associate a "controller" class with an FXML document. A controller is a compiled class that implements the "code behind" the object hierarchy defined by the document.</p>
 
 <p>As shown earlier, controllers are often used to implement event handlers for user interface elements defined in markup:</p>
@@ -865,13 +868,13 @@
 }
 </pre>
 
-<p><assert id="handlers_initialize" group="controllers">In many cases, it is sufficient to simply declare event handlers in this manner. However, when more control over the behavior of the controller and the elements it manages is required, the controller can define an <span class="code">initialize()</span> method, which will be called once on an implementing controller when the contents of its associated document have been completely loaded</assert>:</p>
+<p>In many cases, it is sufficient to simply declare event handlers in this manner. However, when more control over the behavior of the controller and the elements it manages is required, the controller can define an <span class="code">initialize()</span> method, which will be called once on an implementing controller when the contents of its associated document have been completely loaded:</p>
 
 <pre class="code">
 public void initialize();
 </pre>
 
-<p><assert id="post-processing" group="controllers">This allows the implementing class to perform any necessary post-processing on the content.</assert> It also provides the controller with access to the resources that were used to load the document and the location that was used to resolve relative paths within the document (commonly equivalent to the location of the document itself).</p>
+<p>This allows the implementing class to perform any necessary post-processing on the content. It also provides the controller with access to the resources that were used to load the document and the location that was used to resolve relative paths within the document (commonly equivalent to the location of the document itself).</p>
 
 <p>For example, the following code defines an <span class="code">initialize()</span> method that attaches an action handler to a button in code rather than via an event handler attribute, as was done in the previous example. The button instance variable is injected by the loader as the document is read. The resulting application behavior is identical:</p>
 
@@ -902,14 +905,14 @@
 }
 </pre>
 
-<h3><a name="fxml_annotation">@FXML</a></h3>
-<p><assert id="public_controller_access" group="controllers">Note
+<h3><a id="fxml_annotation">@FXML</a></h3>
+<p>Note
 that, in the previous examples, the controller member fields and
 event handler methods were declared as public so they can be set
-or invoked by the loader.</assert> In practice, this is not often
+or invoked by the loader. In practice, this is not often
 an issue, since a controller is generally only visible to the FXML
-loader that creates it. <assert id="FXML_controller_access"
-group="controllers">However, for developers who prefer more restricted
+loader that creates it.
+However, for developers who prefer more restricted
 visibility for controller fields or handler methods, the <span
 class="code">javafx.fxml.FXML</span> annotation can be used. This
 annotation marks a protected or private class member as accessible
@@ -917,7 +920,7 @@
 If the class being annotated is in a named module, the
 module containing that class must <span class="code">open</span>
 the containing package to at least
-the <span class="code">javafx.fxml</span> module.</assert></span>
+the <span class="code">javafx.fxml</span> module.</p>
 
 <p>For example, the controllers from the previous examples could be rewritten as follows:</p>
 
@@ -952,8 +955,8 @@
 
 <p>In the first version, the <span class="code">handleButtonAction()</span> is tagged with <span class="code">@FXML</span> to allow markup defined in the controller's document to invoke it. In the second example, the button field is annotated to allow the loader to set its value. The <span class="code">initialize()</span> method is similarly annotated.</p>
 
-<h3><a name="nested_controllers">Nested Controllers</a></h3>
-<p><assert id="nested_fxml_mapping" group="controllers">Controller instances for nested FXML documents loaded via the <span class="code">&lt;fx:include&gt;</span> element are mapped directly to member fields of the including controller.</assert> This allows a developer to easily access functionality defined by an include (such as a dialog window presented by an application's main window controller). For example, given the following code:
+<h3><a id="nested_controllers">Nested Controllers</a></h3>
+<p>Controller instances for nested FXML documents loaded via the <span class="code">&lt;fx:include&gt;</span> element are mapped directly to member fields of the including controller. This allows a developer to easily access functionality defined by an include (such as a dialog window presented by an application's main window controller). For example, given the following code:
 
 <div class="caption">main_window_content.fxml</div>
 <pre class="code">
@@ -977,7 +980,7 @@
 
 <p>when the controller's <span class="code">initialize()</span> method is called, the <span class="code">dialog</span> field will contain the root element loaded from the "dialog.fxml" include, and the <span class="code">dialogController</span> field will contain the include's controller. The main controller can then invoke methods on the included controller, to populate and show the dialog, for example. Note that as the content of the file referenced by fx:include otherwise would become part of the scene graph spanned from main_window_content.fxml, it is necessary to wrap fx:include by fx:define to separate the scene graphs of both windows.</p>
 
-<h2><a name="fxmlloader">FXMLLoader</a></h2>
+<h2><a id="fxmlloader">FXMLLoader</a></h2>
 <p>The <span class="code">FXMLLoader</span> class is responsible for actually loading an FXML source file and returning the resulting object graph. For example, the following code loads an FXML file from a location on the classpath relative to the loading class and localizes it with a resource bundle named "com.foo.example". The type of the root element is assumed to be a subclass of <span class="code">javafx.scene.layout.Pane</span>, and the document is assumed to define a controller of type <span class="code">MyController</span>:</p>
 
 <pre class="code">
@@ -989,10 +992,10 @@
 MyController controller = (MyController)fxmlLoader.getController();
 </pre>
 
-<p><assert id="loader_instance_hierarchy" group="fxml_loader">Note that the output of an <span class="code">FXMLLoader#load()</span> operation is an instance hierarchy that reflects the actual named classes in the document, not <span class="code">org.w3c.dom</span> nodes representing those classes.</assert> Internally, <span class="code">FXMLLoader</span> uses the <span class="code">javax.xml.stream</span> API (also known as the <i>Streaming API for XML</i>, or <i>StAX</i>) to load an FXML document. StAX is an extremely efficient event-based XML parsing API that is conceptually similar to its W3C predecessor, SAX. It allows an FXML document to be processed in a single pass, rather than loaded into an intermediate DOM structure and then post-processed.</p>
+<p>Note that the output of an <span class="code">FXMLLoader#load()</span> operation is an instance hierarchy that reflects the actual named classes in the document, not <span class="code">org.w3c.dom</span> nodes representing those classes. Internally, <span class="code">FXMLLoader</span> uses the <span class="code">javax.xml.stream</span> API (also known as the <i>Streaming API for XML</i>, or <i>StAX</i>) to load an FXML document. StAX is an extremely efficient event-based XML parsing API that is conceptually similar to its W3C predecessor, SAX. It allows an FXML document to be processed in a single pass, rather than loaded into an intermediate DOM structure and then post-processed.</p>
 
-<h3><a name="custom_components">Custom Components</a></h3>
-<p>The <assert id="loader_setRoot" group="fxml_loader"><span class="code">setRoot()</span></assert> and <assert id="loader_setController" group="fxml_loader"><span class="code">setController()</span></assert> methods of <span class="code">FXMLLoader</span> allow a caller to inject document root and controller values, respectively, into the document namespace, rather than delegating creation of these values to <span class="code">FXMLLoader</span> itself. This allows a developer to easily create reusable controls that are internally implemented using markup, but (from an API perspective) appear identically to controls implemented programmatically.</p>
+<h3><a id="custom_components">Custom Components</a></h3>
+<p>The <span class="code">setRoot()</span> and <span class="code">setController()</span> methods of <span class="code">FXMLLoader</span> allow a caller to inject document root and controller values, respectively, into the document namespace, rather than delegating creation of these values to <span class="code">FXMLLoader</span> itself. This allows a developer to easily create reusable controls that are internally implemented using markup, but (from an API perspective) appear identically to controls implemented programmatically.</p>
 
 <p>For example, the following markup defines the structure of a simple custom control containing a <span class="code">TextField</span> and a <span class="code">Button</span> instance. The root container is defined as an instance of <span class="code">javafx.scene.layout.VBox</span>:</p>
 
@@ -1007,7 +1010,7 @@
 &lt;/fx:root&gt;
 </pre>
 
-<p>As mentioned earlier, the <span class="code">&lt;fx:root&gt;</span> tag creates a reference to a previously defined root element. The value of this element is obtained by calling the <span class="code">getRoot()</span> method of <span class="code">FXMLLoader</span>. <assert id="loader_setRoot_sequence" group="fxml_loader">Prior to calling <span class="code">load()</span>, the caller must specify this value via a call to <span class="code">setRoot()</span></assert>. <assert id="loader_setController_sequence" group="fxml_loader">The caller may similarly provide a value for the document's controller by calling <span class="code">setController()</span>, which sets the value that will be used as the document's controller when the document is read</assert>. These two methods are commonly used together when creating custom FXML-based components.</p>
+<p>As mentioned earlier, the <span class="code">&lt;fx:root&gt;</span> tag creates a reference to a previously defined root element. The value of this element is obtained by calling the <span class="code">getRoot()</span> method of <span class="code">FXMLLoader</span>. Prior to calling <span class="code">load()</span>, the caller must specify this value via a call to <span class="code">setRoot()</span>. The caller may similarly provide a value for the document's controller by calling <span class="code">setController()</span>, which sets the value that will be used as the document's controller when the document is read. These two methods are commonly used together when creating custom FXML-based components.</p>
 
 <p>In the following example, the <span class="code">CustomControl</span> class extends <span class="code">VBox</span> (the type declared by the <span class="code">&lt;fx:root&gt;</span> element), and sets itself as both the root and controller of the FXML document in its constructor. When the document is loaded, the contents of <span class="code">CustomControl</span> will be populated with the contents of the previous FXML document:</p>
 
@@ -1073,7 +1076,7 @@
 &lt;/HBox&gt;
 </pre>
 
-<h2><a name="deploy_as_module">Deploying an Application as a Module</a></h2>
+<h2><a id="deploy_as_module">Deploying an Application as a Module</a></h2>
 <p>If <span class="code">FXMLLoader</span> is used to load types in a named
 module, the application must ensure that all types that are referenced in the
 FXML files, including the controller class and any custom <span class="code">Node</span>
--- a/modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html	Mon Jun 12 22:58:51 2017 +0530
+++ b/modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html	Thu Jun 15 10:32:49 2017 -0700
@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<!doctype html>
 
 <!--
 /*
@@ -27,7 +27,7 @@
  */
 -->
 
-<html lang="en-US">
+<html lang="en">
   <head>
     <meta name="description" content="This document describes the JavaFX
               Cascading Style Sheets (CSS) for JavaFX 9 and explains the
@@ -570,7 +570,7 @@
     or Parent style sheet. Inline styles have highest precedence. Style sheets
     from a Parent instance are considered to be more specific than those styles
     from Scene style sheets.</cite>
-    <h3><a name="intronaming" id="introsnaming">Naming Conventions</a></h3>
+    <h3><a name="intronaming" id="intronaming">Naming Conventions</a></h3>
     <p>Naming conventions have been established for deriving CSS style&#8209;class
         names from JavaFX class names, and for deriving CSS property names from
         JavaFX variable names. Note that this is only a naming convention; there
@@ -837,7 +837,7 @@
     <h3><a name="typeangle" id="typeangle">&lt;angle&gt;</a></h3>
     <p>An angle is a <a href="#typenumber" class="typeref">&lt;number&gt;</a>
       with one of the following units.</p>
-    <p> </p>
+    <p>&nbsp;</p>
     <p class="grammar"><a href="#typenumber">&lt;number&gt;</a>[ deg | rad |
       grad | turn ]</p>
     <ul>
@@ -850,7 +850,7 @@
     <h3><a name="typeduration" id="typeduration">&lt;duration&gt;</a></h3>
     <p>A duration is a <a href="#typenumber" class="typeref">&lt;number&gt;</a>
         with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
-    <p> </p>
+    <p>&nbsp;</p>
     <p class="grammar">[<a href="#typenumber">&lt;number&gt;</a>[ s | ms ]] | indefinite</p>
     <ul>
         <li><strong>s</strong>: duration in seconds</li>
@@ -923,7 +923,7 @@
             <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/images/Duke.png</td>
         </tr>
         </table>
-    <p></p>
+    <p>&nbsp;</p>
     <table class="csspropertytable" cellspacing="3" cellpadding="4">
         <caption>Examples of Resolving URLs in Inline Styles</caption>
         <tr>
@@ -1114,7 +1114,7 @@
       <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a>]+) <br>
       <br>
       where &lt;side-or-corner&gt; = [left | right] || [top | bottom] </p>
-    <p> </p>
+    <p>&nbsp;</p>
     <p>Linear gradient creates a gradient going though all the stop colors along
       the line between the "from" <a href="#typepoint" class="typelink">&lt;point&gt;</a>
       and the "to" <a href="#typepoint" class="typelink">&lt;point&gt;</a>. If
@@ -1234,520 +1234,520 @@
     <table summary="property table" class="html4colortable">
       <tbody>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;">&nbsp;</span><br>
           </td>
           <td>aliceblue = #f0f8ff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;">&nbsp;</span><br>
           </td>
           <td>antiquewhite = #faebd7</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;">&nbsp;</span><br>
           </td>
           <td>aqua = #00ffff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;">&nbsp;</span><br>
           </td>
           <td>aquamarine = #7fffd4</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;">&nbsp;</span><br>
           </td>
           <td>azure = #f0ffff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;">&nbsp;</span><br>
           </td>
           <td>beige = #f5f5dc</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;">&nbsp;</span><br>
           </td>
           <td>bisque = #ffe4c4</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;">&nbsp;</span><br>
           </td>
           <td>black = #000000</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;">&nbsp;</span><br>
           </td>
           <td>blanchedalmond = #ffebcd</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;">&nbsp;</span><br>
           </td>
           <td>blue = #0000ff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;">&nbsp;</span><br>
           </td>
           <td>blueviolet = #8a2be2</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;">&nbsp;</span><br>
           </td>
           <td>brown = #a52a2a</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;">&nbsp;</span><br>
           </td>
           <td>burlywood = #deb887</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;">&nbsp;</span><br>
           </td>
           <td>cadetblue = #5f9ea0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;">&nbsp;</span><br>
           </td>
           <td>chartreuse = #7fff00</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;">&nbsp;</span><br>
           </td>
           <td>chocolate = #d2691e</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;">&nbsp;</span><br>
           </td>
           <td>coral = #ff7f50</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;">&nbsp;</span><br>
           </td>
           <td>cornflowerblue = #6495ed</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;">&nbsp;</span><br>
           </td>
           <td>cornsilk = #fff8dc</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;">&nbsp;</span><br>
           </td>
           <td>crimson = #dc143c</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;">&nbsp;</span><br>
           </td>
           <td>cyan = #00ffff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;">&nbsp;</span><br>
           </td>
           <td>darkblue = #00008b</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;">&nbsp;</span><br>
           </td>
           <td>darkcyan = #008b8b</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;">&nbsp;</span><br>
           </td>
           <td>darkgoldenrod = #b8860b</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;">&nbsp;</span><br>
           </td>
           <td>darkgray = #a9a9a9</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;">&nbsp;</span><br>
           </td>
           <td>darkgreen = #006400</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;">&nbsp;</span><br>
           </td>
           <td>darkgrey = #a9a9a9</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;">&nbsp;</span><br>
           </td>
           <td>darkkhaki = #bdb76b</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;">&nbsp;</span><br>
           </td>
           <td>darkmagenta = #8b008b</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;">&nbsp;</span><br>
           </td>
           <td>darkolivegreen = #556b2f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;">&nbsp;</span><br>
           </td>
           <td>darkorange = #ff8c00</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;">&nbsp;</span><br>
           </td>
           <td>darkorchid = #9932cc</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;">&nbsp;</span><br>
           </td>
           <td>darkred = #8b0000</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;">&nbsp;</span><br>
           </td>
           <td>darksalmon = #e9967a</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;">&nbsp;</span><br>
           </td>
           <td>darkseagreen = #8fbc8f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;">&nbsp;</span><br>
           </td>
           <td>darkslateblue = #483d8b</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;">&nbsp;</span><br>
           </td>
           <td>darkslategray = #2f4f4f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;">&nbsp;</span><br>
           </td>
           <td>darkslategrey = #2f4f4f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;">&nbsp;</span><br>
           </td>
           <td>darkturquoise = #00ced1</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;">&nbsp;</span><br>
           </td>
           <td>darkviolet = #9400d3</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;">&nbsp;</span><br>
           </td>
           <td>deeppink = #ff1493</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;">&nbsp;</span><br>
           </td>
           <td>deepskyblue = #00bfff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;">&nbsp;</span><br>
           </td>
           <td>dimgray = #696969</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;">&nbsp;</span><br>
           </td>
           <td>dimgrey = #696969</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;">&nbsp;</span><br>
           </td>
           <td>dodgerblue = #1e90ff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;">&nbsp;</span><br>
           </td>
           <td>firebrick = #b22222</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;">&nbsp;</span><br>
           </td>
           <td>floralwhite = #fffaf0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;">&nbsp;</span><br>
           </td>
           <td>forestgreen = #228b22</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;">&nbsp;</span><br>
           </td>
           <td>fuchsia = #ff00ff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;">&nbsp;</span><br>
           </td>
           <td>gainsboro = #dcdcdc</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;">&nbsp;</span><br>
           </td>
           <td>ghostwhite = #f8f8ff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;">&nbsp;</span><br>
           </td>
           <td>gold = #ffd700</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;">&nbsp;</span><br>
           </td>
           <td>goldenrod = #daa520</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;">&nbsp;</span><br>
           </td>
           <td>gray = #808080</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;">&nbsp;</span><br>
           </td>
           <td>green = #008000</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;">&nbsp;</span><br>
           </td>
           <td>greenyellow = #adff2f</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;">&nbsp;</span><br>
           </td>
           <td>grey = #808080</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;">&nbsp;</span><br>
           </td>
           <td>honeydew = #f0fff0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;">&nbsp;</span><br>
           </td>
           <td>hotpink = #ff69b4</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;">&nbsp;</span><br>
           </td>
           <td>indianred = #cd5c5c</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;">&nbsp;</span><br>
           </td>
           <td>indigo = #4b0082</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;">&nbsp;</span><br>
           </td>
           <td>ivory = #fffff0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;">&nbsp;</span><br>
           </td>
           <td>khaki = #f0e68c</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;">&nbsp;</span><br>
           </td>
           <td>lavender = #e6e6fa</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;">&nbsp;</span><br>
           </td>
           <td>lavenderblush = #fff0f5</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;">&nbsp;</span><br>
           </td>
           <td>lawngreen = #7cfc00</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;">&nbsp;</span><br>
           </td>
           <td>lemonchiffon = #fffacd</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;">&nbsp;</span><br>
           </td>
           <td>lightblue = #add8e6</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;">&nbsp;</span><br>
           </td>
           <td>lightcoral = #f08080</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;">&nbsp;</span><br>
           </td>
           <td>lightcyan = #e0ffff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;">&nbsp;</span><br>
           </td>
           <td>lightgoldenrodyellow = #fafad2</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;">&nbsp;</span><br>
           </td>
           <td>lightgray = #d3d3d3</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;">&nbsp;</span><br>
           </td>
           <td>lightgreen = #90ee90</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;">&nbsp;</span><br>
           </td>
           <td>lightgrey = #d3d3d3</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;">&nbsp;</span><br>
           </td>
           <td>lightpink = #ffb6c1</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;">&nbsp;</span><br>
           </td>
           <td>lightsalmon = #ffa07a</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;">&nbsp;</span><br>
           </td>
           <td>lightseagreen = #20b2aa</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;">&nbsp;</span><br>
           </td>
           <td>lightskyblue = #87cefa</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;">&nbsp;</span><br>
           </td>
           <td>lightslategray = #778899</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;">&nbsp;</span><br>
           </td>
           <td>lightslategrey = #778899</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;">&nbsp;</span><br>
           </td>
           <td>lightsteelblue = #b0c4de</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;">&nbsp;</span><br>
           </td>
           <td>lightyellow = #ffffe0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;">&nbsp;</span><br>
           </td>
           <td>lime = #00ff00</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;">&nbsp;</span><br>
           </td>
           <td>limegreen = #32cd32</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;">&nbsp;</span><br>
           </td>
           <td>linen = #faf0e6</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;">&nbsp;</span><br>
           </td>
           <td>magenta = #ff00ff</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;">&nbsp;</span><br>
           </td>
           <td>maroon = #800000</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;">&nbsp;</span><br>
           </td>
           <td>mediumaquamarine = #66cdaa</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;">&nbsp;</span><br>
           </td>
           <td>mediumblue = #0000cd</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;">&nbsp;</span><br>
           </td>
           <td>mediumorchid = #ba55d3</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;">&nbsp;</span><br>
           </td>
           <td>mediumpurple = #9370db</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;">&nbsp;</span><br>
           </td>
           <td>mediumseagreen = #3cb371</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;">&nbsp;</span><br>
           </td>
           <td>mediumslateblue = #7b68ee</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;">&nbsp;</span><br>
           </td>
           <td>mediumspringgreen = #00fa9a</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;">&nbsp;</span><br>
           </td>
           <td>mediumturquoise = #48d1cc</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;">&nbsp;</span><br>
           </td>
           <td>mediumvioletred = #c71585</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;">&nbsp;</span><br>
           </td>
           <td>midnightblue = #191970</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;">&nbsp;</span><br>
           </td>
           <td>mintcream = #f5fffa</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;">&nbsp;</span><br>
           </td>
           <td>mistyrose = #ffe4e1</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;">&nbsp;</span><br>
           </td>
           <td>moccasin = #ffe4b5</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;">&nbsp;</span><br>
           </td>
           <td>navajowhite = #ffdead</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;">&nbsp;</span><br>
           </td>
           <td>navy = #000080</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;">&nbsp;</span><br>
           </td>
           <td>oldlace = #fdf5e6</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;">&nbsp;</span><br>
           </td>
           <td>olive = #808000</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;">&nbsp;</span><br>
           </td>
           <td>olivedrab = #6b8e23</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;">&nbsp;</span><br>
           </td>
           <td>orange = #ffa500</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;">&nbsp;</span><br>
           </td>
           <td>orangered = #ff4500</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;">&nbsp;</span><br>
           </td>
           <td>orchid = #da70d6</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;">&nbsp;</span><br>
           </td>
           <td>palegoldenrod = #eee8aa</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;">&nbsp;</span><br>
           </td>
           <td>palegreen = #98fb98</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;">&nbsp;</span><br>
           </td>
           <td>paleturquoise = #afeeee</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;">&nbsp;</span><br>
           </td>
           <td>palevioletred = #db7093</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;">&nbsp;</span><br>
           </td>
           <td>papayawhip = #ffefd5</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;">&nbsp;</span><br>
           </td>
           <td>peachpuff = #ffdab9</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;">&nbsp;</span><br>
           </td>
           <td>peru = #cd853f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;">&nbsp;</span><br>
           </td>
           <td>pink = #ffc0cb</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;">&nbsp;</span><br>
           </td>
           <td>plum = #dda0dd</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;">&nbsp;</span><br>
           </td>
           <td>powderblue = #b0e0e6</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;">&nbsp;</span><br>
           </td>
           <td>purple = #800080</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;">&nbsp;</span><br>
           </td>
           <td>red = #ff0000</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;">&nbsp;</span><br>
           </td>
           <td>rosybrown = #bc8f8f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;">&nbsp;</span><br>
           </td>
           <td>royalblue = #4169e1</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;">&nbsp;</span><br>
           </td>
           <td>saddlebrown = #8b4513</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;">&nbsp;</span><br>
           </td>
           <td>salmon = #fa8072</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;">&nbsp;</span><br>
           </td>
           <td>sandybrown = #f4a460</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;">&nbsp;</span><br>
           </td>
           <td>seagreen = #2e8b57</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;">&nbsp;</span><br>
           </td>
           <td>seashell = #fff5ee</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;">&nbsp;</span><br>
           </td>
           <td>sienna = #a0522d</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;">&nbsp;</span><br>
           </td>
           <td>silver = #c0c0c0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;">&nbsp;</span><br>
           </td>
           <td>skyblue = #87ceeb</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;">&nbsp;</span><br>
           </td>
           <td>slateblue = #6a5acd</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;">&nbsp;</span><br>
           </td>
           <td>slategray = #708090</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;">&nbsp;</span><br>
           </td>
           <td>slategrey = #708090</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;">&nbsp;</span><br>
           </td>
           <td>snow = #fffafa</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;">&nbsp;</span><br>
           </td>
           <td>springgreen = #00ff7f</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;">&nbsp;</span><br>
           </td>
           <td>steelblue = #4682b4</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;">&nbsp;</span><br>
           </td>
           <td>tan = #d2b48c</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;">&nbsp;</span><br>
           </td>
           <td>teal = #008080</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;">&nbsp;</span><br>
           </td>
           <td>thistle = #d8bfd8</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;">&nbsp;</span><br>
           </td>
           <td>tomato = #ff6347</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;">&nbsp;</span><br>
           </td>
           <td>turquoise = #40e0d0</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;">&nbsp;</span><br>
           </td>
           <td>violet = #ee82ee</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;">&nbsp;</span><br>
           </td>
           <td>wheat = #f5deb3</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;">&nbsp;</span><br>
           </td>
           <td>white = #ffffff</td>
         </tr>
         <tr>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;">&nbsp;</span><br>
           </td>
           <td>whitesmoke = #f5f5f5</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;">&nbsp;</span><br>
           </td>
           <td>yellow = #ffff00</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;">&nbsp;</span><br>
           </td>
           <td>yellowgreen = #9acd32</td>
-          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br>
+          <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;">&nbsp;</span><br>
           </td>
           <td>transparent = rgba(0,0,0,0)</td>
         </tr>
@@ -1793,7 +1793,7 @@
         class="typelink">&lt;number&gt;</a>
       )</p>
     <p>These examples all specify the same color for the text fill of a Label:</p>
-    <p class="example"></p>
+    <p class="example">&nbsp;</p>
     <ul style="list-style: none;">
       <li>.label { -fx-text-fill: #f00 } /* #rgb */</li>
       <li>.label { -fx-text-fill: #ff0000 } /* #rrggbb */</li>
@@ -1801,7 +1801,7 @@
       <li> .label { -fx-text-fill: rgb(100%, 0%, 0%) }</li>
       <li>.label { -fx-text-fill: rgba(255,0,0,1) }</li>
     </ul>
-    <p></p>
+    <p>&nbsp;</p>
     <p><strong>RGB Hex</strong>: The format of an RGB value in hexadecimal
       notation is a &lsquo;#&rsquo; immediately followed by either three or six
       hexadecimal characters. The three-digit RGB notation (#rgb) is converted
@@ -1824,7 +1824,7 @@
       transparent) and 1.0 (completely opaque). As with the rgb() function, the
       red, green, and blue values may be decimal integers or percentages. The
       following examples all specify the same color:</p>
-    <p class="example"></p>
+    <p class="example">&nbsp;</p>
     <ul style="list-style: none;">
       <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 &mdash; 255*/</li>
       <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
@@ -1834,7 +1834,7 @@
       <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
         explicit opacity of 1 */</li>
     </ul>
-    <p></p>
+    <p>&nbsp;</p>
     <h4>HSB Colors <span class="grammar" style="font-size: smaller;">&lt;hsb-color&gt;</span></h4>
     <p>Colors can be specified using the HSB (sometimes called HSV) color model,
       as follows:</p>
@@ -4616,6 +4616,7 @@
     <p>Note that the default style class, "spinner", puts arrows on right, stacked vertically. The following
         style classes can also be used in combination with the default style class in order to control the
         layout of the Spinner.
+    </p>
     <table>
         <thead>
         <tr>
@@ -4647,7 +4648,7 @@
         </tbody>
     </table>
 
-    </p>
+    <p>&nbsp;</p>
     <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
       <thead>
         <tr>
@@ -5606,7 +5607,7 @@
     <table summary="property table" class="package" width="100%">
       <tbody>
         <tr>
-          <td><a name="charts">javafx.scene.chart</a></td>
+          <td>javafx.scene.chart</td>
         </tr>
       </tbody>
     </table>
@@ -5651,7 +5652,7 @@
         </tr>
       </tbody>
     </table>
-    <p>
+    <p>&nbsp;</p>
       <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
           <tr>
@@ -5765,7 +5766,7 @@
         </tr>
       </tbody>
     </table>
-    <p>
+    <p>&nbsp;</p>
       <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
           <tr>
@@ -5820,7 +5821,7 @@
         </tr>
       </tbody>
     </table>
-    <p>
+    <p>&nbsp;</p>
       <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
           <tr>
@@ -5836,7 +5837,7 @@
           </tr>
         </tbody>
       </table>
-    <h4><a name="categoyaxis" id="categoryaxis">CategoryAxis</a></h4>
+    <h4><a name="categoryaxis" id="categoryaxis">CategoryAxis</a></h4>
     <p class="styleclass">Style class: axis</p>
     <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
@@ -5968,7 +5969,7 @@
         </tr>
       </tbody>
     </table>
-    <p>
+    <p>&nbsp;</p>
       <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
           <tr>
@@ -6050,7 +6051,7 @@
         </tr>
       </tbody>
     </table>
-    <p>
+    <p>&nbsp;</p>
       <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
           <tr>
@@ -6116,7 +6117,7 @@
         </tr>
         </tbody>
     </table>
-    <p>
+    <p>&nbsp;</p>
     <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
         <thead>
         <tr>