Display of changes found using DeltaXML
This file displays the results of comparing two files. The delta file generated by DeltaXML is an XML
file. It has been translated into the HTML seen here by an XSL style sheet, so all the display styles,
colours etc. can easily be changed by modifying the XSL stylesheet.
This stylesheet works best with a 'full' delta output, which includes unchanged data as well as changed data.
Data that has been modified is shown like this. Data that has been deleted is shown like this.
Data that is added is shown like this.
To collapse a node's children click the '-' button. To expand it again, click '+'. Unchanged elements are collapsed by default.
This page is best viewed with Cascading Style Sheets and JavaScript both enabled.
For further details of DeltaXML see http://www.deltaxml.com
-
<p0:html>
-
<p0:head>
+
<p0:meta name="generator" content="Microsoft FrontPage 4.0"/> +
<p0:meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> -
<p0:title>
How to Use Using DeltaXML Markup with XHTML
</p0:title>
+
<p0:style type="text/css" xml:space="preserve">
<!-- div.old, span.old { color: red; text-decoration: line-through }
div.new, span.new { color: green; text-decoration: underline }
div.comment, span.comment { color: blue; font-style: italic }
table p { margin: 0 }
table + table { margin-top: 2px }
table { width: 100%; border: 2px solid black }
td { vertical-align: top }
th { background-color: #999999 }
table.elem th { text-align: left }
div.mixed { display: block; margin-left: 1em }
table.elem { background-color: #CCCCCC }
table.attr { background-color: #CCCCCC }
table.exchange { background-color: #CCCCCC }
table.pcdata { background-color: #CCCCCC }
table.mixed { background-color: #CCCCCC }
-->
</p0:style>
</p0:head>
-
<p0:body>
-
<p0:h1 align="center">
How to Use Using DeltaXML Markup with XHTML
</p0:h1>
-
<p0:h1 align="center">
(Version 1)2)
</p0:h1>
-
<p0:div align="center">
-
<p0:img src="/resources/skins/dxml/img/dxlogo-300x76.gif" alt="DeltaXML logo" width="300" height="76"/>
</p0:div>
+
<p0:p>
+
<p0:b>
This version:
</p0:b>
</p0:p>
-
<p0:blockquote>
-
<p0:p>
-
<p0:a shape="rect" href="intro-v1.htmlintro-v2.html">
http://www.deltaxml.com/xhtml/intro-v1.htmlhttp://www.deltaxml.com/xhtml/intro-v2.html
</p0:a>
dated 12th 14th February 2002
</p0:p>
</p0:blockquote>
+
<p0:p>
+
<p0:b>
Previous versions:
</p0:b>
</p0:p>
-
<p0:blockquote>
-
<p0:p>
-
<p0:a href="intro-v1.html" shape="rect">
http://www.deltaxml.com/xhtml/intro-v1.html
</p0:a>
None dated 12th February 2002
</p0:p>
</p0:blockquote>
+
<p0:blockquote>
+
<p0:p>
+
<p0:a href="mailto:robin@deltaxml.com" shape="rect">
Robin La Fontaine
</p0:a>
, Monsell EDM Ltd.
</p0:p>
</p0:blockquote>
+
<p0:p>
+
<p0:i>
Copyright © 2002 Monsell EDM Ltd All rights reserved.
</p0:i>
</p0:p>
-
<p0:blockquote>
+
<p0:p>
+
<p0:font face="Arial, Helvetica, sans-serif">
+
<p0:b>
+
<p0:font size="+2">
Contents
</p0:font>
</p0:b>
</p0:font>
</p0:p>
+
<p0:p>
+
<p0:a href="#Introduction" shape="rect">
+
<p0:font face="Arial, Helvetica, sans-serif">
Introduction
</p0:font>
</p0:a>
</p0:p>
-
<p0:p>
-
<p0:a shape="rect" href="#guidelines">
-
<p0:font face="Arial, Helvetica, sans-serif">
Guidelines for best resultsBest Results
</p0:font>
</p0:a>
</p0:p>
+
<p0:p>
+
<p0:a href="#tables" shape="rect">
+
<p0:font face="Arial, Helvetica, sans-serif">
Changes to tables
</p0:font>
</p0:a>
</p0:p>
+
<p0:p>
+
<p0:a href="#forms" shape="rect">
+
<p0:font face="Arial, Helvetica, sans-serif">
Example of forms
</p0:font>
</p0:a>
</p0:p>
+
<p0:p>
+
<p0:a href="#filters" shape="rect">
+
<p0:font face="Arial, Helvetica, sans-serif">
XHTML Filters
</p0:font>
</p0:a>
</p0:p>
+
<p0:p>
+
<p0:a href="#Conclusions" shape="rect">
+
<p0:font face="Arial, Helvetica, sans-serif">
Conclusions
</p0:font>
</p0:a>
</p0:p>
</p0:blockquote>
+
<p0:h2>
+
<p0:a id="Introduction" name="Introduction" shape="rect"/> Introduction
</p0:h2>
-
<p0:p>
This document explains how DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
may be used to find changes to XHTML files and display these changes as XHTML so that they can be viewed in a browser. DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
will not work with HTML files directly because HTML files are not valid XML. However, if these are converted to XHTML, e.g. using Tidy, then DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
can be applied and provides a very flexible way to display changes in electronic documents.
</p0:p>
-
<p0:p>
The DeltaXML
-
<p0:a href="/" shape="rect">
-
<p0:b>
DeltaXML
</p0:b>
web site
</p0:a>
web site provides a demonstration of this capability but it is important to understand that this is only one way to use it. If it does not do exactly what you need then it is possible to change it so that it will meet your needs. This is because XSL stylesheets are used as input and output filters to produce the result shown. By changing these filters, changes can be displayed in many different ways.
</p0:p>
-
<p0:p>
The current demonstration on the -
<p0:b>
DeltaXML
</p0:b>
web site shows basic textual differencing and it does not, for example, show changes to the text attributes. However, by changing the output filter using standard XSL it would be possible to show such changes to the user. This means that by using XML, in the form of XHTML, and with -
<p0:b>
DeltaXML
</p0:b>
DeltaXML, , the result is far more powerful than a simple HTML differencer. The demonstration is based on XHTML Transitional "XHTML Transitional" and is a demonstration only and may not work for all XHTML files.
</p0:p>
-
<p0:h2>
+
<p0:a id="guidelines" name="guidelines" shape="rect"/> Guidelines for best resultsBest Results
</p0:h2>
-
<p0:p>
The -
<p0:b>
DeltaXML
</p0:b>
DeltaXMLcomparison comparison process can be controlled to ensure that the 'same' items are matched up in the two files being compared. This is particularly important where extensive changes have been made. For example, if a number of paragraphs have been deleted and new ones added, with existing ones changed, then it is almost impossible for an automated process to find the correct matches between the original and the new document. There is a simple solution to this: ID attributes can be added to identify the sections and paragraphs and these will be used by DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
in matching the two files.
</p0:p>
-
<p0:p>
The first principle is therefore to use ID attributes as extensively as possible to enable the best results. These can be added to headings and paragraphs. XHTML and XML require these to be unique within the file but DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
only requires keys to be unique within their parent element. This means that if you have some other way to identify the elements then you can use that instead of ID attributes - all that is needed is to change the XSL input filter to copy these values into a +
<p0:b>
deltaxml:key
</p0:b>
attribute.
</p0:p>
+
<p0:p>
To illustrate this effect, consider the two examples below.
</p0:p>
+
<p0:h3>
Result without using keys
</p0:h3>
+
<p0:p>
Para 1a: These paragraphs have no keys.
</p0:p>
+
<p0:p>
Para 1b: Therefore it is difficult to detect when a paragraph has been changed and when it has been deleted and a new one added.
</p0:p>
-
<p0:p>
Para 1c: 1d: This paragraph will be deleted, and a new one added after the next paragraph.modified - like this.
</p0:p>
-
<p0:p>
Para 1d: 2a: This paragraph will be modified.has been added in version 2.
</p0:p>
+
<p0:h3>
Result using keys
</p0:h3>
+
<p0:p id="p1a">
Para 1a: These paragraphs do have keys.
</p0:p>
+
<p0:p id="p1b">
Para 1b: Therefore it is easy to detect when a paragraph has been changed and when it has been deleted and a new one added.
</p0:p>
-
<p0:p id="p1cp1d">
Para 1c: 1d: This paragraph will be deleted, and a new one added after the next paragraph.modified - like this.
</p0:p>
-
<p0:p id="p1dp2a">
Para 1d: 2a: This paragraph will be modified.has been added in version 2
</p0:p>
+
<p0:h2>
+
<p0:a id="tables" name="tables" shape="rect"/> Changes to Tables
</p0:h2>
-
<p0:p>
DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
will in many cases be able to detect where rows and columns have been added to tables, or where the text has been changed. In some cases formatting may be lost, for example where the <col> and <colgroup> elements have been used.
</p0:p>
+
<p0:p>
Consider a small table with some text as shown below.
</p0:p>
-
<p0:table border="1" width="90%">
-
<p0:tr>
-
<p0:td rowspan="1" colspan="1" width="31%">
Problem
</p0:td>
-
<p0:td rowspan="1" width="45%" colspan="1">
Solution
-
<p0:b>
Solution
</p0:b>
</p0:td>
-
<p0:td rowspan="1" width="24%" colspan="1">
Comment
</p0:td>
</p0:tr>
+
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
Identifying the corresponding paragraphs in the two documents
</p0:td>
+
<p0:td width="45%" rowspan="1" colspan="1">
Use ID attributes to enable DeltaXML to match these
</p0:td>
+
<p0:td width="24%" rowspan="1" colspan="1">
You can use other attributes if you prefer provided they are unique within the parent element
</p0:td>
</p0:tr>
+
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
Ignoring changes to text formatting
</p0:td>
+
<p0:td width="45%" rowspan="1" colspan="1">
You can strip out this information from both files as they are read in using XSL
</p0:td>
+
<p0:td width="24%" rowspan="1" colspan="1">
You can do this selectively
</p0:td>
</p0:tr>
</p0:table>
+
<p0:p align="center">
</p0:p>
-
<p0:p>
In this version of this document, the title line above is in normal bold text. In a modified the previous version the title is in bold.it was in normal text.
</p0:p>
+
<p0:p>
We will copy the same table again below, and in the second version make some modifications to the text.
</p0:p>
-
<p0:table border="1" width="90%">
+
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
</p0:td>
+
<p0:td width="45%" rowspan="1" colspan="1">
+
<p0:b>
Solution
</p0:b>
</p0:td>
+
<p0:td width="24%" rowspan="1" colspan="1">
</p0:td>
</p0:tr>
-
<p0:tr>
-
<p0:td rowspan="1" colspan="1" width="31%">
Identifying How can we be sure to identify the corresponding paragraphs in the two documentsdocuments?
</p0:td>
-
<p0:td rowspan="1" width="45%" colspan="1">
Use ID attributes to enable DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
to match these
</p0:td>
+
<p0:td width="24%" rowspan="1" colspan="1">
You can use other attributes if you prefer provided they are unique within the parent element
</p0:td>
</p0:tr>
-
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
Ignoring changes to text formatting
</p0:td>
+
<p0:td width="45%" rowspan="1" colspan="1">
You can strip out this information from both files as they are read in using XSL
</p0:td>
-
<p0:td rowspan="1" width="24%" colspan="1">
You can do this selectivelyselectively, i.e. for elements you select
</p0:td>
</p0:tr>
</p0:table>
+
<p0:p align="center">
</p0:p>
+
<p0:p align="left">
Again, we will copy the table and then remove a column.
</p0:p>
-
<p0:table border="1" width="90%">
-
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
</p0:td>
+
<p0:td width="45%" rowspan="1" colspan="1">
+
<p0:b>
Solution
</p0:b>
</p0:td>
-
<p0:td width="24%" rowspan="1" colspan="1">
</p0:td>
</p0:tr>
-
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
Identifying the corresponding paragraphs in the two documents
</p0:td>
-
<p0:td rowspan="1" width="45%" colspan="1">
Use ID attributes to enable DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
to match these
</p0:td>
-
<p0:td width="24%" rowspan="1" colspan="1">
You can use other attributes if you prefer provided they are unique within the parent element
</p0:td>
</p0:tr>
-
<p0:tr>
+
<p0:td width="31%" rowspan="1" colspan="1">
Ignoring changes to text formatting
</p0:td>
+
<p0:td width="45%" rowspan="1" colspan="1">
You can strip out this information from both files as they are read in using XSL
</p0:td>
-
<p0:td width="24%" rowspan="1" colspan="1">
You can do this selectively
</p0:td>
</p0:tr>
</p0:table>
+
<p0:p align="center">
</p0:p>
-
<p0:p align="left">
In this version, there are just two columns in the table above rather than three as in the first version.
</p0:p>
-
<p0:h2>
+
<p0:a id="forms" name="forms" shape="rect"/> Example of Forms - Version 2
</p0:h2>
+
<p0:p>
Forms are more complex to handle because some of the items, for example each option in a menu, cannot have underlined text in them. So, these need to be processed in a special way. Here we have chose to flag the changes using -[[xx]]- to indicate a deletion and +[[xx]]+ to indicate an addition.
</p0:p>
-
<p0:p>
This is an example of a simple form which will be has been modified.
</p0:p>
-
<p0:p>
Changes are to the Title choices:
</p0:p>
-
<p0:ul>
-
<p0:li>
"Rev" has been changed to "Revd"
</p0:li>
-
<p0:li>
"Ms" and "None" have been added
</p0:li>
-
<p0:li>
Default value of "None" has been selected
</p0:li>
</p0:ul>
-
<p0:p>
The "Are you using -
<p0:b>
DeltaXML
</p0:b>
" has been changed from a check-box to radio buttons with "No" button added.
</p0:p>
-
<p0:p>
The "How do you rate -
<p0:b>
DeltaXML
</p0:b>
" has been modifed and each item in the checklist has been changed. Default has been added.
</p0:p>
-
<p0:form enctype="application/x-www-form-urlencoded" method="post" name="form1" action="">
-
<p0:p>
-
<p0:b>
Form1 Version 12
</p0:b>
</p0:p>
+
<p0:p>
Enter your name: +
<p0:input type="text" name="textfield" size="20"/>
</p0:p>
-
<p0:p>
Title: -
<p0:select name="select">
+
<p0:option value="mr">
Mr
</p0:option>
+
<p0:option value="mrs">
Mrs
</p0:option>
+
<p0:option value="dr">
Dr
</p0:option>
-
<p0:option value="rev">
RevRevd
</p0:option>
-
<p0:option value="ms">
Ms
</p0:option>
-
<p0:option value="none" selected="selected">
None
</p0:option>
+
<p0:option value="unknown">
Unknown
</p0:option>
</p0:select>
</p0:p>
-
<p0:p>
Are you using DeltaXML? -
<p0:input type="checkboxradio" name="checkboxradiobutton" value="checkboxyes"/> Yes...whitespace changes in PCDATA...-
<p0:input type="radio" name="radiobutton" value="no"/> No
</p0:p>
-
<p0:p>
How do you rate DeltaXML? DeltaXML on a scale of 1-10? -
<p0:select name="select2">
-
<p0:option value="10" selected="selected">
Excellent10
</p0:option>
-
<p0:option value="8">
Very good8
</p0:option>
-
<p0:option value="6">
Good6
</p0:option>
-
<p0:option value="5">
OK5
</p0:option>
-
<p0:option value="3">
Fair3
</p0:option>
-
<p0:option value="1">
1
</p0:option>
</p0:select>
</p0:p>
</p0:form>
-
<p0:p align="left">
The above example is not meant to illustrate the best or only way to identify changes - it simply illustrates one way in which the delta file can be processed to show a user how items have changed. Because the delta file represents a structured version of the two files, with changes clearly marked up, it is possible to show almost anything in the output.
</p0:p>
+
<p0:h2 align="left">
+
<p0:a id="filters" name="filters" shape="rect"/> XHTML Filters
</p0:h2>
-
<p0:p align="left">
The process uses input and output filters written in XSL. These apply some changes to the files to ensure that DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
works in a way that is appropriate to XHTML.
</p0:p>
+
<p0:h3 align="left">
XHTML Input filter
</p0:h3>
-
<p0:p align="left">
The input filter will add keys to the XHTML file based on the ID attributes. It will also indicate to DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
that the <head> element is unordered, i.e. its child elements may appear in any order in the two files. To assist in matching up corresponsing elements, keys are added to each <meta> tag based on the value of its 'name' attribute. The filter also deletes <col> and <colgroup> elements so that changes to tables can be represented without causing errors in the XHTML file.
</p0:p>
+
<p0:h3 align="left">
XHTML Output filter
</p0:h3>
+
<p0:p align="left">
The output filter, again written in XSL, converts the delta file into standard XHTML. This is achieved by processing each item according to one of the following
</p0:p>
-
<p0:ul>
-
<p0:li>
process unchanged data (data that is the same in both files) by copying to output
</p0:li>
+
<p0:li>
process added data by by copying to output with all text underlined
</p0:li>
+
<p0:li>
process deleted data by by copying to output with all text struck-through
</p0:li>
+
<p0:li>
process modified data, treating each child to see which of the above apply
</p0:li>
</p0:ul>
+
<p0:p>
Note that within some elements, e.g. <style>, we do not do this - we simply output just the new or both added and deleted text. Changes can be made to this according to actual needs. For attributes, the values in the 'new' file are used and there is no indication in the output file if these have changed. Again, the XSL could be modified so that changed attribute values are shown to the user.
</p0:p>
+
<p0:h2>
+
<p0:a id="Conclusions" name="Conclusions" shape="rect"/> Conclusions
</p0:h2>
-
<p0:p>
The examples shown above illustrate how DeltaXML
-
<p0:b>
DeltaXML
</p0:b>
can be applied to show changes to XHTML files. Using XSL, the process can be configured to ignore changes of some types of data, e.g. text characteristics, and to show changes in any way a user may require. This therefore provides a much more flexible solution than a simple HTML differencer might provide.
</p0:p>
-
<p0:p>
The second version has modifications which are made to illustrate how differences are detected and shown. Both files were created in Dreamweaver and then MacTidy was applied to convert to XHTML.
</p0:p>
+
<p0:p>
+
<p0:i>
Copyright © 2002 Monsell EDM Ltd All rights reserved. Patent applied for.
</p0:i>
</p0:p>
</p0:body>
</p0:html>