About HTML Tree Parser
Alpino is a dependecy parser for Dutch. It transforms a given input (e.g. a sentence) into a dependency structure in XML format, however no interactive
visualization options are readily available that are cross‑browser friendly. Alpino only provides an
SVG‑based web interface which might not provide all users with the desired experience. Especially a significant user base that is stuck with
IE 8 on Windows XP (often found in enterprise environments) cannot use an SVG‑approach because this format is not support in IE 8. The tool presented here ensures that users on such older browsers as well as those on modern ones
can enjoy the same experience without limiting the abilities of a modern day's browser.
Drawing trees with a barebones HTML and CSS approach has a couple of advantages over SVG. First of, with HTML5 we can use data-attributes to store information (properties) about nodes inline. This means that we don't have to do additional requests to a server, another
file, or even another part of the DOM. Data‑attributes are not (yet) available in the SVG format. HTML and data‑attributes evidently also allow
for easier JavaScript integration and element manipulation than SVG which often requires additional libraries to unleash the power of JavaScript.
Secondly, having our tree structure present in a HTML list allows us to style the tree as we please. This is also possible in SVG, but options are limited or not as straightforward as in CSS.
As already noted, the approach presented on this webpage fully supports Internet Explorer 8, an old web browser that does not support the SVG format but that's nonetheless frequently used in enterprises. Users of Windows XP are
stuck with this version of Microsoft's browser as newer versions are not available for that version of Windows.
Lastly, because we don't use any images or pixel‑limited elements, this approach scales equally well as SVG on different screen sizes.
Please note that I certainly do not wish to discard SVG as a fantasy of designers that entered the wide world of the web. SVG definitely has its advantages and uses, especially in (web) design considering its scalability! But I don't believe that presenting
an XML structure as a tree is one of its strongpoints.
In the future, the core of this project will be incorporated into the corpus query tool GrETEL to provide users with visual feedback on their queries.
HTML Tree Parser for Alpino is in beta. Please report any issues on Twitter or LinkedIn .
How to use
To investigate the tree and see the properties of each leaf, click on a leaf. Properties are sorted alphabetically to easily find what you need.
One of the big advantages of this tool is that you can analyse any given XML file, be it for the Alpino parser or not. You can provide your own code, either by using the textarea and clicking on the submit button, or by using the file uploader.
The latter option will only be available if you have a modern browser that allows the use of the new HTML5 File API. "Uploaded" XML files are not stored on the server.
A resolution of at least 960 pixels wide is recommended. This tool requires JavaScript and cannot (and will not) work without it. Internet Explorer 7 and lower is not supported.
To do
Allow keyboard control in fullscreen mode (cross-OS!)
Improve script structure and performance
Add comments to the script and (S)CSS. Make everything accessible for beginners
Add repo on GitHub, 'cause we all ♥ open source
Fix random jumps in tooltip in fullscreen mode
Add fullscreen option
Add examples
Add information
Add input field. HTML5 File API?
Improve text editor with syntax highlighting
Improve interface