title: Aligning and Inlining components (or icons) in JTextPane
body: <p>I'm working on an application in Java which, among other things, is supposed to display the details of a Magic: The Gathering card in a text field (since I'm using Swing, this is currently a <code>JTextPane</code>).</p>
  <p>Those details contain text and small icons, with some of those icons inlined with the text (so the text flows around them), and some icons, by my design, right-aligned with some left-aligned text in the same line.</p>
  <p>I took an image from another application which uses a very similar design to the one I'm working on (although not in Java):</p>
  <p><a href="https://i.stack.imgur.com/Fr8ps.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fr8ps.png" alt="enter image description here" /></a></p>
  <p>This is how it basically should look like.</p>
  <p>Now, for the love of everything, I can't get that to work in a <code>JTextPane</code>.</p>
  <p>I started with trying to do this with CSS, but found out that the <code>JEditorPane</code> and subclasses don't support the &quot;float&quot; attribute, so I tried it with using the Pane's <code>StyledDocument</code> instead.</p>
  <p>I didn't get the first part to work (the icon and right-align text at the top always ignored their alignment and were placed directly after the left-aligned text in the line) at first, until I found <a href="https://stackoverflow.com/questions/13069730/textalignment-is-not-working-in-java-swing-jtextpane">this question</a>.</p>
  <p>It was suggested to use the following line of code:</p>
  <pre><code>pane.setEditorKit(new HTMLEditorKit());
  </code></pre>
  <p>which somehow indeed fixed my first issue.</p>
  <p>But now I'm stuck at the second part, getting those icons in the second part inline with the text. Here's what I currently got:</p>
  <p><a href="https://i.stack.imgur.com/I38RW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I38RW.png" alt="enter image description here" /></a></p>
  <p>What I've found is that for some reason, when you switch the <code>JTextPane</code> to html mode with an editor kit with the line of code above, inserting components just goes completely crazy.</p>
  <p>Both the icons on the top (which I have merged into a single image actually), and the ones in the text below (not merged) are both inside of <code>JLabels</code>, but it doesn't matter if I add them as images or inside of <code>JLabels</code>. The images or labels are definitely not bigger than what you see there, I have no idea at all where the extra whitespace is coming from.</p>
  <p>I found <a href="https://stackoverflow.com/questions/12140026/how-to-wrap-text-around-components-in-a-jtextpane">this question</a>, and the answer suggest that this is some kind of bug or just weird behavior with the html mode of the <code>JEditorPane</code>.</p>
  <p>If I remove the above code line again, I end up with my original problem:</p>
  <p><a href="https://i.stack.imgur.com/JXh8s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JXh8s.png" alt="enter image description here" /></a></p>
  <p>Depending on where exactly the icons are in the text, I get all kinds of different weird results. I put together some more example pictures below:</p>
  <p><a href="https://i.stack.imgur.com/ADGrv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ADGrv.jpg" alt="enter image description here" /></a></p>
  <p><strong>So, how could I possibly fix this?</strong> The <code>JTextPane</code> is working fine for me, except for this part, but I could possibly use some other solution, as long as the end result still looks the same. Remember that I might want to add some other components (like a Button) in there, so I'd like to stick to something native to Swing if possible at all.</p>
  <p>The user will not be able to edit the TextPane's contents, but I'd like to add an option later to copy all of the content in one click (so I'd rather stay with a text area).</p>
  <p>Below, I have put together a (not really that minimal) working example for you to play around with:</p>
  <p><strong>(EDIT: Updated code at the bottom now! The old code is still there under the following link.)</strong></p>
  <p><a href="http://pastebin.com/RwAdPCzb" rel="nofollow noreferrer">http://pastebin.com/RwAdPCzb</a></p>
  <p>The icons that I'm using are below. You'd need to rename them and change the path in the code.<br></p>
  <p><a href="https://i.stack.imgur.com/sNiiF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sNiiF.png" alt="enter image description here" /></a><br>
  <a href="https://i.stack.imgur.com/1qHdP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1qHdP.png" alt="enter image description here" /></a><br>
  <a href="https://i.stack.imgur.com/nvdE9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nvdE9.png" alt="enter image description here" /></a><br></p>
  <p>Some things to notice:</p>
  <ul><li>In the beginning I styled the text using the `Style` class, as described in the "How to use Editor Panes and Text Panes" tutorial on the Oracle website (TextSamplerDemo.java, for your reference). With this, I wasn't even able to do the right-align part at the top. Strangely, when I used the `SimpleAttributeSet` class for styling instead, even with the very same settings, it works.</li>
  <li>I tried different alignment options for both the text and the labels which contain the icons. Regardless of what options I used, there was no visible difference at all.</li></ul>
  <hr>
  <h2>UPDATE 1:</h2>
  <p>After Sharcoux' answer, I have edited my code to have 2 JLabels above the actual JTextPane which hold the two lines that were supposed to have different alignings (a left- and a right-aligned part).
  The JTextPane doesn't use a HTMLEditorKit anymore now, and I use insertIcon() to insert the icons into the text.</p>
  <p>This way, the icons are inserted (almost) correctly!<br>
  Image here:<br>
  <a href="https://i.stack.imgur.com/e4TQZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e4TQZ.png" alt="enter image description here" /></a></p>
  <p><strong>However, there are two small things that I'm still not satisfied with:</strong></p>
  <p><s><strong>First:</strong><br>
  I need to put everything into a JScrollPane because the text in the TextPane is <em>much</em> longer in my actual application. Since I now have three components instead of just the TextPane, I needed to put everything into a JPanel and that into the ScrollPane.<br>
  However, if you do it like this, the JTextPane doesn't know that its with should not exceed the JScrollPane's anymore. It stopps wrapping text and just grows as big as the entire text.<br>
  I have opened a new question for this, since I feel that this is a basic issue of Swing and deserves its own question. If you want to help, here is the link:<br>
  <a href="https://stackoverflow.com/questions/32514168/jtextcomponent-inside-jpanel-inside-jscrollpane">JTextComponent inside JPanel inside JScrollPane</a></s></p>
  <p><strong>Second:</strong><br>
  This is probably not possible, but I guess I'll ask anyway. The icons have the same baseline as the text when you add them this way. Is they any way to move them just a bit lower? 2-3 pixels, maybe? They would align much better with the text that way. Two pictures below.<br>
  This is how it looks now:<br>
  <a href="https://i.stack.imgur.com/SWHIc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SWHIc.png" alt="enter image description here" /></a><br>
  And this is how I would like it to look:<br>
  <a href="https://i.stack.imgur.com/IVjwr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IVjwr.png" alt="enter image description here" /></a></p>
  <p>Maybe I can subclass and override some part of the JTextPane to move all icons that are rendered on it down a set pixel amount, or something like that?</p>
  <p>For reference, here is also my new, updated code. I replaced the old one above with a pastebin.com link, if you still want to look at it.</p>
  <hr>
  <h2>UPDATE 2:</h2>
  <p>My first problem has already been eliminated! I updated the code below to reflect that, too.</p>
  <p><strong>My second question still stands!</strong></p>
  <p>Here's the new code:</p>
  <pre><code>import java.awt.EventQueue;
  import java.awt.Graphics2D;
  import javax.imageio.ImageIO;
  import javax.swing.ImageIcon;
  import javax.swing.JFrame;
  import javax.swing.JLabel;
  import javax.swing.JPanel;
  import javax.swing.border.EmptyBorder;
  import javax.swing.text.BadLocationException;
  import javax.swing.text.SimpleAttributeSet;
  import javax.swing.text.StyleConstants;
  import javax.swing.text.StyledDocument;
  import java.awt.GridLayout;
  import java.awt.Rectangle;
  import java.awt.image.BufferedImage;
  import java.io.File;
  import java.io.IOException;
  import java.util.HashMap;
  import java.util.regex.Matcher;
  import java.util.regex.Pattern;
  import javax.swing.JScrollPane;
  import javax.swing.Scrollable;
  import javax.swing.JTextPane;
  import javax.swing.JViewport;
   
  import java.awt.BorderLayout;
  import java.awt.Dimension;
  import java.awt.Color;
  import java.awt.Container;
  import java.awt.Font;
  import javax.swing.ScrollPaneConstants;
   
  public class MinimalExample extends JFrame {
   
      private JPanel contentPane;
      private JScrollPane scrollPane;
      private JTextPane textPane;
   
      // Setup some data for an example card:
      String name = &quot;Absorb Vis&quot;;
      String set = &quot;CON&quot;;
      String manaCost = &quot;{6}{B}&quot;;
      String printedType = &quot;Sorcery&quot;;
      String artist = &quot;Brandon Kitkouski&quot;;
   
      String rulesText = &quot;Target player loses 4 life and you gain 4 life.\n&quot;
              + &quot;Basic landcycling {1}{B} ({1}{B}, Discard this card: &quot;
              + &quot;Search your library for a basic land card, reveal it, and put &quot;
              + &quot;it into your hand. Then shuffle your library.)&quot;;
   
      HashMap&lt;String, BufferedImage&gt; manaSymbolImages;
      private ScrollablePanel textPanel;
      //private JPanel textPanel;
      private JPanel headlinesPanel;
      private JPanel firstHeadlinePanel;
      private JPanel secondHeadlinePanel;
      private JLabel titleLabel;
      private JLabel manaCostLabel;
      private JLabel typeLabel;
      private JLabel setLabel;
   
      public static void main(String[] args) {
   
          EventQueue.invokeLater(new Runnable() {
   
              public void run() {
   
                  try {
                      MinimalExample frame = new MinimalExample();
                      frame.setVisible(true);
                  }
                  catch (Exception e) {
                      e.printStackTrace();
                  }
              }
          });
      }
   
      public MinimalExample() {
   
          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          setBounds(100, 100, 230, 400);
          contentPane = new JPanel();
          contentPane.setBackground(Color.WHITE);
          contentPane.setBorder(null);
          setContentPane(contentPane);
          /* HTMLEditorKit eKit = new HTMLEditorKit();
           * textPane.setEditorKit(eKit); HTMLDocument htmlDoc = (HTMLDocument)
           * textPane.getDocument(); htmlDoc.setPreservesUnknownTags(false); */
          contentPane.setLayout(new GridLayout(0, 1, 0, 0));
   
          textPanel = new ScrollablePanel();
          //textPanel = new JPanel();
          textPanel.setBackground(Color.WHITE);
          textPanel.setLayout(new BorderLayout(0, 0));
   
          headlinesPanel = new JPanel();
          headlinesPanel.setBorder(new EmptyBorder(2, 5, 3, 5));
          headlinesPanel.setBackground(Color.WHITE);
          textPanel.add(headlinesPanel, BorderLayout.NORTH);
          headlinesPanel.setLayout(new GridLayout(0, 1, 0, 0));
   
          firstHeadlinePanel = new JPanel();
          firstHeadlinePanel.setBorder(new EmptyBorder(0, 0, 3, 0));
          firstHeadlinePanel.setOpaque(false);
          headlinesPanel.add(firstHeadlinePanel);
          firstHeadlinePanel.setLayout(new BorderLayout(0, 0));
   
          titleLabel = new JLabel(&quot;&quot;);
          titleLabel.setFont(new Font(&quot;Tahoma&quot;, Font.BOLD, 12));
          firstHeadlinePanel.add(titleLabel, BorderLayout.WEST);
   
          manaCostLabel = new JLabel(&quot;&quot;);
          firstHeadlinePanel.add(manaCostLabel, BorderLayout.EAST);
   
          secondHeadlinePanel = new JPanel();
          secondHeadlinePanel.setBorder(null);
          secondHeadlinePanel.setOpaque(false);
          headlinesPanel.add(secondHeadlinePanel);
          secondHeadlinePanel.setLayout(new BorderLayout(0, 0));
   
          typeLabel = new JLabel(&quot;&quot;);
          typeLabel.setFont(new Font(&quot;Tahoma&quot;, Font.PLAIN, 12));
          secondHeadlinePanel.add(typeLabel, BorderLayout.WEST);
   
          setLabel = new JLabel(&quot;&quot;);
          setLabel.setFont(new Font(&quot;Tahoma&quot;, Font.BOLD, 12));
          secondHeadlinePanel.add(setLabel, BorderLayout.EAST);
   
          scrollPane = new JScrollPane();
          scrollPane.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
          scrollPane.setBackground(Color.WHITE);
          contentPane.add(scrollPane);
   
          textPane = new JTextPane();
          textPane.setBorder(new EmptyBorder(0, 3, 0, 3));
          textPane.setAlignmentY(0.3f);
          textPane.setEditable(false);
   
          textPanel.add(textPane, BorderLayout.CENTER);
   
          scrollPane.setViewportView(textPanel);
   
          loadManaCostIcons();
          setPaneText();
      }
   
      // This part inserts the text into the document of the text pane.
      public void setPaneText() {
   
          titleLabel.setText(name);
          manaCostLabel.setIcon(combineSymbols(manaCost));
          typeLabel.setText(printedType);
          setLabel.setText(set);
   
          StyledDocument textPaneDoc = textPane.getStyledDocument();
   
          SimpleAttributeSet defaultAtts = new SimpleAttributeSet();
          StyleConstants.setFontFamily(defaultAtts, &quot;SansSerif&quot;);
          StyleConstants.setFontSize(defaultAtts, 12);
   
          SimpleAttributeSet rulesAtts = new SimpleAttributeSet(defaultAtts);
   
          SimpleAttributeSet artistAtts = new SimpleAttributeSet(defaultAtts);
          StyleConstants.setFontSize(artistAtts, 10);
   
          addTextWithSymbols(rulesText, rulesAtts);
   
          try {
   
              textPaneDoc.insertString(textPaneDoc.getLength(), artist, artistAtts);
          }
          catch (BadLocationException e) {
   
              e.printStackTrace();
          }
   
          textPane.revalidate();
          textPane.repaint();
      }
   
      /* This adds the rest of the text to the pane. The codes for the symbols get
       * replaced by the actual symbols and the text gets inserted piece by piece. */
      public void addTextWithSymbols(String text, SimpleAttributeSet style) {
   
          StyledDocument textPaneDoc = textPane.getStyledDocument();
          Pattern symbolPattern = Pattern.compile(&quot;\\{(.*?)\\}&quot;);
   
          try {
   
              Matcher symbolMatcher = symbolPattern.matcher(text);
              int previousMatch = 0;
   
              while (symbolMatcher.find()) {
   
                  int start = symbolMatcher.start();
                  int end = symbolMatcher.end();
                  String subStringText = text.substring(previousMatch, start);
                  String currentMatch = text.substring(start, end);
   
                  if (subStringText.isEmpty() == false) {
   
                      textPaneDoc.insertString(textPaneDoc.getLength(), subStringText, style);
                  }
   
                  ImageIcon currentIcon = new ImageIcon(manaSymbolImages.get(currentMatch));
   
                  SimpleAttributeSet iconAtts = new SimpleAttributeSet();
                  JLabel iconLabel = new JLabel(currentIcon);
                  StyleConstants.setComponent(iconAtts, iconLabel);
   
                  textPane.insertIcon(currentIcon);
                  previousMatch = end;
              }
   
              String subStringText = text.substring(previousMatch);
   
              if (subStringText.isEmpty() == false) {
                 
                  textPaneDoc.insertString(textPaneDoc.getLength(), subStringText + &quot;\n&quot;, style);
              }
          }
          catch (Exception e) {
   
              e.printStackTrace();
          }
      }
   
      /* Everything below is more or less irrelevant. However, you might need to
       * adjust the image image file paths. */
   
      public void loadManaCostIcons() {
   
          manaSymbolImages = new HashMap&lt;String, BufferedImage&gt;();
          try {
   
              // Most likely, those paths won't work for you!
              File bFile = new File(&quot;resource/B.png&quot;);
              File c1File = new File(&quot;resource/1.png&quot;);
              File c6File = new File(&quot;resource/6.png&quot;);
   
              manaSymbolImages.put(&quot;{B}&quot;, ImageIO.read(bFile));
              manaSymbolImages.put(&quot;{1}&quot;, ImageIO.read(c1File));
              manaSymbolImages.put(&quot;{6}&quot;, ImageIO.read(c6File));
          }
          catch (IOException e) {
   
              e.printStackTrace();
          }
      }
   
      public ImageIcon combineSymbols(String symbols) {
   
          String[] manaSymbols = symbols.split(&quot;(?&lt;=})&quot;);
          int combinedWidth = 0;
          int maxHeight = 0;
   
          for (int i = 0; i &lt; manaSymbols.length; i++) {
   
              BufferedImage currentSymbolImage = manaSymbolImages.get(manaSymbols[i]);
              combinedWidth += currentSymbolImage.getWidth();
   
              if (maxHeight &lt; currentSymbolImage.getWidth()) {
                  maxHeight = currentSymbolImage.getWidth();
              }
          }
   
          BufferedImage combinedManaCostImage = new BufferedImage(combinedWidth, maxHeight,
                  BufferedImage.TYPE_INT_ARGB);
          Graphics2D graphics = combinedManaCostImage.createGraphics();
   
          int currentPosition = 0;
   
          for (int i = 0; i &lt; manaSymbols.length; i++) {
   
              BufferedImage tempCurrentImage = manaSymbolImages.get(manaSymbols[i].trim());
              graphics.drawImage(tempCurrentImage, null, currentPosition, 0);
              currentPosition += tempCurrentImage.getWidth();
          }
   
          graphics.dispose();
          return (new ImageIcon(combinedManaCostImage));
      }
   
      /* Original source of this is here:
       * https://stackoverflow.com/questions/15783014/jtextarea-on-jpanel-inside-jscrollpane-does-not-resize-properly
       * And one update to it is here:
       *  */
      private static class ScrollablePanel extends JPanel implements Scrollable {
   
          @Override
          public Dimension getPreferredScrollableViewportSize() {
   
              return super.getPreferredSize();
          }
   
          @Override
          public int getScrollableUnitIncrement(Rectangle visibleRect, int orientation,
                  int direction) {
   
              return 16;
          }
   
          @Override
          public int getScrollableBlockIncrement(Rectangle visibleRect, int orientation,
                  int direction) {
   
              return 16;
          }
   
          @Override
          public boolean getScrollableTracksViewportWidth() {
   
              return true;
          }
   
          @Override
          public boolean getScrollableTracksViewportHeight() {
   
              boolean track = true;
              Container parent = getParent();
              if (parent instanceof JViewport) {
   
                  JViewport viewport = (JViewport) parent;
                  if (viewport.getHeight() &lt; getPreferredSize().height) {
                      track = false;
                  }
   
              }
   
              return track;
          }
      }
  }
  </code></pre>