javaswinghtml-listsjeditorpanehtmleditorkit

Unordered List Bullets Look Pixelated in JEditorPane


I'm using an HTML unordered list to display some text within a JEditorPane. A sample of the HTML looks like this:

<ul><li>Cautious</li>
<li>Curious</li>
</ul>

This works all well and good, but strangely the bullets generated by <li> don't look to be the same quality as the text it is next to. (Running Mac OS 10.7.5 if it matters). The circular bullets look blocky and pixelated:

Normal zoom:

enter image description here

Zoomed in:

enter image description here

As especially evident when it is zoomed in, this is just a block of pixels that aren't symmetrical and lack any form of anti-aliasing, which makes for a less than convincing circular bullet point. Compared to the text next to it, it looks "off" to a discerning eye, even at normal zoom.

Is there any way that I can fix this?

EDIT: Using the • character (option + 8 on a Mac) creates a smaller bullet point in the text that does not look pixelated. I could of course insert this character manually rather than using <ul><li>, but I'd like to use an HTML unordered list if I can.


Solution

  • Use rendering hints to turn on anti-aliasing property KEY_ANTIALIASING.

    You set some rendering hints globally, but that does not seem to work for KEY_ANTIALIASING, so you need to override the paint() method of JEditorPane.

    public class HTMLTest {    
    
          public static void main(String[] args) {
            SwingUtilities.invokeLater(new Runnable() {
              @Override
              public void run() {
                String html = "<ul><li>Cautious</li><li>Curious</li></ul>";
                JEditorPane pane = new JEditorPane("text/html", html) {
    
                  public void paint(Graphics g) {
                    Graphics2D g2d = (Graphics2D) g.create();
                    g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                    super.paint(g2d);
                    g2d.dispose();
                  }
    
                };
                pane.setVisible(true);
    
                JOptionPane.showMessageDialog(null, pane);
              }
            });    
          }
    }