Unordered List Bullets Look Pixelated in JEditorPane

Question

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:

Zoomed in:

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.

Answer 1

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);
          }
        });    
      }
}

Answer 2

You need to modify the bullet points. Create an image of a better-looking bullet point, and then add CSS to the editor pane to make it use your new bullet image.

JEditorPane pane = new JEditorPane();
String u = "C:/path/to/bullet.png";
HTMLEditorKit htmlEditorKit = (HTMLEditorKit) pane.getEditorKit();
StyleSheet styleSheet = htmlEditorKit.getStyleSheet();
styleSheet.addRule(String.format("ul{list-style-image:url(%s);margin:0px 20px;", u));