Set Inline Text and Image in a JEditorPane

Question

I can not set inline txt and img in a jeditorpane

Image of JEditorPane:

how can i set them inline?

This is my Code:

        JFrame frame = new JFrame("HelloWorldSwing");

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        GridBagLayout gridBagLayout = new GridBagLayout();
        gridBagLayout.columnWidths = new int[]{363, 0};
        gridBagLayout.rowHeights = new int[]{261, 0, 0};
        gridBagLayout.columnWeights = new double[]{0.0, Double.MIN_VALUE};
        gridBagLayout.rowWeights = new double[]{0.0, 0.0, Double.MIN_VALUE};
        frame.getContentPane().setLayout(gridBagLayout);


        JEditorPane jep = new JEditorPane();
        jep.setContentType("text/html");

        HTMLEditorKit kit = new HTMLEditorKit();
        jep.setEditorKit(kit);


        StyleSheet styleSheet = kit.getStyleSheet();
        styleSheet.addRule("body {color:#000; font-family:times; margin: 4px; display: inline; line-height: 20px;}");
        styleSheet.addRule("img {padding-top: 10;}");


        jep.setText("<span>Hello computer! <img src='file:ClientServer/Sticker/1.png' width='20' height='20' valign='middle'></span>");

Answer 1

• javax/swing/text/html/ImageView.java

/**
 * Update any cached values that come from attributes.
 */
protected void setPropertiesFromAttributes() {
    StyleSheet sheet = getStyleSheet();
    this.attr = sheet.getViewAttributes(this);

    //...

    AttributeSet attr = getElement().getAttributes();

    // Alignment.
    // PENDING: This needs to be changed to support the CSS versions
    // when conversion from ALIGN to VERTICAL_ALIGN is complete.
    Object alignment = attr.getAttribute(HTML.Attribute.ALIGN);

    vAlign = 1.0f;
    if (alignment != null) {
        alignment = alignment.toString();
        if ("top".equals(alignment)) {
            vAlign = 0f;
        }
        else if ("middle".equals(alignment)) {
            vAlign = .5f;
        }
    }

• By referring to the above code, specifying "align" instead of "valign" does not seem to work well.
  • styleSheet.addRule("img {padding-top: 10; align: middle; valign: middle; vertical-align: middle; }");

The following is an example of overriding the ImageView#getAlignment(...) method.

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

public class ImgBaselineTest {
  private JComponent makeUI() {
    JEditorPane editor2 = makeEditorPane(new ImgBaselineHTMLEditorKit());
    JEditorPane editor1 = makeEditorPane(new HTMLEditorKit());
    JPanel p = new JPanel(new GridLayout(2, 1));
    p.add(new JScrollPane(editor1));
    p.add(new JScrollPane(editor2));
    return p;
  }
  private JEditorPane makeEditorPane(HTMLEditorKit kit) {
    JEditorPane jep = new JEditorPane();
    jep.setContentType("text/html");
    jep.putClientProperty(JEditorPane.HONOR_DISPLAY_PROPERTIES, Boolean.TRUE);
    // HTMLEditorKit kit = new HTMLEditorKit();
    // HTMLEditorKit kit = new ImgBaselineHTMLEditorKit();
    jep.setEditorKit(kit);
    StyleSheet styleSheet = kit.getStyleSheet();
    styleSheet.addRule("span {color:orange; font-family:times; margin: 4px; display: inline; line-height: 20px;}");
    styleSheet.addRule("img {padding-top: 10; align: middle; valign: middle; vertical-align: middle; }");

    //URL url = ImgBaselineTest.class.getResource("16x16.png");
    String url = "https://i.stack.imgur.com/MOQoc.png";
    // jep.setText("<span>Hello computer! <img src='" + url + "' width='20' height='20' valign='middle'></span>");
    jep.setText("<span>Hello computer! <img src='" + url + "''></span>");
    return jep;
  }
  public static void main(String[] args) {
    EventQueue.invokeLater(() -> {
      JFrame f = new JFrame();
      f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
      f.getContentPane().add(new ImgBaselineTest().makeUI());
      f.setSize(320, 240);
      f.setLocationRelativeTo(null);
      f.setVisible(true);
    });
  }
}

class ImgBaselineHTMLEditorKit extends HTMLEditorKit {
  @Override public ViewFactory getViewFactory() {
    return new HTMLEditorKit.HTMLFactory() {
      @Override public View create(Element elem) {
        View view = super.create(elem);
        if (view instanceof LabelView) {
          System.out.println(view.getAlignment(View.Y_AXIS));
        }
        AttributeSet attrs = elem.getAttributes();
        Object elementName = attrs.getAttribute(AbstractDocument.ElementNameAttribute);
        Object o = elementName != null ? null : attrs.getAttribute(StyleConstants.NameAttribute);
        if (o instanceof HTML.Tag) {
          HTML.Tag kind = (HTML.Tag) o;
          if (kind == HTML.Tag.IMG) {
            return new ImageView(elem) {
              @Override public float getAlignment(int axis) {
                switch (axis) {
                case View.Y_AXIS:
                  return .8125f; // magic number...
                default:
                  return super.getAlignment(axis);
                }
              }
            };
          }
        }
        return view;
      }
    };
  }
}