Search code examples
javahtmlswingrenderingjeditorpane

Swing HTML rendering shows very large bullet point

I use a JEditorPane to render some HTML in a swing application. I use a bullet point list <ul><li>...</li></ul> and I obtain overly large bullet points in the output. The same HTML chunk will show normal sized bullet points in a real browser.

I observed this on Windows 7 / JDK 7 and iirc also on Ubuntu and OpenJDK 1.7.0_09.

Is this known? Is there a way around it?

Working example:

import javax.swing.JEditorPane;
import javax.swing.JFrame;
import javax.swing.WindowConstants;

/**
 *
 */
public class HTMLTest {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // create new frame
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        frame.setSize(500, 500);

        // create editor pane and fill with some html
        JEditorPane pane = new JEditorPane();
        pane.setContentType("text/html");
        pane.setEditable(false);
        pane.setText("<html><h1>Heading</h1>Text<ul><li>Bullet point</li></ul></html>");

        // add editor pane to frame and set frame visible
        frame.add(pane);
        frame.setVisible(true);
    }
}

P.S.: I am now using

ul {
    list-style-type: none;
    margin-left: 10px
}

in a css file and 

<li>&bull; Item 1</li>

in the html to have a decent bullet point. Solution inspired by aterai.

Solution

  • +1 @StanislavL and here is another example(use css list-style-image property):

    screenshot

    bullet.png: bullet.png

    import java.awt.*;
import javax.swing.*;
import javax.swing.text.*;
import javax.swing.text.html.*;

public class HTMLTest2 {
  public JComponent makeEditorPane(String bullet) {
    // create editor pane and fill with some html
    JEditorPane pane = new JEditorPane();
    pane.setContentType("text/html");
    pane.setEditable(false);
    if(bullet!=null) {
      HTMLEditorKit htmlEditorKit = (HTMLEditorKit)pane.getEditorKit();
      StyleSheet styleSheet = htmlEditorKit.getStyleSheet();
      //String u = getClass().getResource(bullet).toString();
      String u = "https://i.sstatic.net/jV29K.png";
      styleSheet.addRule(String.format("ul{list-style-image:url(%s);margin:0px 20px;", u));
      //styleSheet.addRule("ul{list-style-type:circle;margin:0px 20px;}");
      //styleSheet.addRule("ul{list-style-type:disc;margin:0px 20px;}");
      //styleSheet.addRule("ul{list-style-type:decimal;margin:0px 20px;}");
    }
    pane.setText("<html><h1>Heading</h1>Text<ul><li>Bullet point</li></ul></html>");
    return pane;
  }
  public JComponent makeUI() {
    JPanel p = new JPanel(new GridLayout(2,1));
    p.add(new JScrollPane(makeEditorPane(null)));
    p.add(new JScrollPane(makeEditorPane("bullet.png")));
    return p;
  }
  public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
      @Override public void run() {
        createAndShowGUI();
      }
    });
  }
  public static void createAndShowGUI() {
    JFrame f = new JFrame();
    f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    f.getContentPane().add(new HTMLTest2().makeUI());
    f.setSize(320, 320);
    f.setLocationRelativeTo(null);
    f.setVisible(true);
  }
}