HTML Support in JEditorPane
The JEditorPane control in Java 1.3+, being a random proprietary HTML renderer, has a particular set of constructs that it supports and doesn’t support. Since my current work unfortunately requires an intimate familiarity with this passel of peculiarities, and my google-fu hasn’t turned up any suitable references, I’m going to keep an ongoing catalogue of my findings in this entry. If you find errors or stupidities (I freely admit that I’m not very HTML-savvy), or you know of a comprehensive reference, please let me know.
<span> – The <span> element, which is useful for applying a style to a sub-paragraph section of text, doesn’t seem to work. I got around it by defining a class of cite that annuls its usual italic rendering and adds the attributes I want:
<style>
cite.attr {font-size: 8px; color: #666633; font-style: normal}
</style>
...
<cite class="attr">attribute</cite>
link coloration – After setting the style of some text in the above manner, links in the text would appear in default blue on some platforms, and in the color of the surrounding text on others. In all cases, it had an underline, which I wanted to remove. Using
a:link {color: blue} in the stylesheet didn’t work, but defining a class of “a” and using it for links seems to work on some (but not all) of the platforms:
<style>
a.val {text-decoration: none; color: blue}
</style>
...
<a class="val" href="http://yourmom.com">link text</a>
OK, time to get stupid. It isn’t pretty, but if you close the offending style before the link and restart it afterwards, it works:
<cite class="attr"> ... </cite> <a class="val" href="http://yourmom.com">link text</a> <cite class="attr"> ... </cite>
animated GIFs – In a pleasant surprise, these appear to work at least once, both in foreground and background images. However, the images seem to be cached, so that if an animation is only set to repeat once, it will only be animated in the first document in which it’s used. I’m still looking for a way to fix this.
table cell colors and images – Setting a color or and/or image for the background of a table cell using <td bgcolor="#000000" background="foo.gif"> works fine.
table height – I’m using a table to create a left-hand column that’s a different background color from the rest of the page. This works great when the page contents are long, but when they’re short, the colored column stops before the bottom of the window. You can fix this with table height attributes in most browsers like so:
<body bgcolor="#FFFFFF">
<table width="100%" height="100%" border="0">
<tr>
<td width="50" bgcolor="#666666">column 1</td>
<td width="90%">column 2</td>
</tr>
<tr>
<td width="50" bgcolor="#666666">column 1</td>
<td width="90%">column 2</td>
</tr>
...
<tr>
<td width="50" height="99%" bgcolor="#666666"> </td>
<td width="90%"> </td>
</tr>
</table>
</body>
Unfortunately, in the JEditorPane, the last row appears at normal size rather than taking up the remaining vertical room in the window.
self-closing tags – If you follow proper XHTML dogma and include an ending “/” in single tags, like so:
<link rel="stylesheet" type="text/css" href="style.css" />>” sticking out at the top of your page. Things work fine if you go old-skool and leave out the closing “/”:<link rel="stylesheet" type="text/css" href="style.css">
background image positioning in CSS – You can use background-position: left bottom to align the background image of a table cell with the lower-left corner of the cell. But if you also include background-repeat: repeat-x in the style for the table cell, the alignment will revert back to the upper-left corner.
-
Jose Sanchez