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.

Pacific

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

Pacifist

Works perfectly! Unfortunately, the link you pointed to for rendering hints globally has a note saying that it doesn't work for key anti-aliasing (only text). Still, this works without any hitches. Enjoy the bounty! – Pacific

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

Eel

I can't get the image to load. new File(u).exists() returns true, but I just see the default bullet point, even if I try a completely different image. Also, I'd prefer a method that didn't require me to use an internal image. Might I be able to use the • (U+2022) instead? – Pacific

I've currently got an edit in review that fixes the code. I found out that the reason it didn't work for me was u must begin with file:/// because it is a URL. Also, I found out that the code doesn't work at all if a certain JEditorPane constructor is used. The solution now works, but I like the other solution better because it solves the pixelation problem without having to rely on an external image. – Pacific