Java Swing渲染html在右侧对齐文本

Question

I'm currently working on a chat GUI with java and I'm trying to use the html css option with JTextPane.我目前正在使用 java 开发聊天 GUI，并且正在尝试将 html css 选项与 JTextPane 一起使用。

I'm not familiar with html / css so it was a bit hard but I managed to get the result I wanted except from 1 thing.我不熟悉 html / css 所以有点难，但我设法得到了我想要的结果，除了 1 件事。

The thing is, I want the blue chat to be on the right side of the screen, like 30% of the screen is empty and then there is the blue part.问题是，我希望蓝色聊天出现在屏幕右侧，比如屏幕的 30% 是空的，然后是蓝色部分。

Here is a photoshop of what I'm trying to obtain :这是我想要获得的照片：

Here is my java code :这是我的java代码：

import java.awt.*;
import java.awt.event.*;

import javax.swing.*;
import javax.swing.border.*;

public class FenetreRenduHtml extends JFrame
{
    private JPanel p_content;
    private JTextArea ta_css;
    private JTextArea ta_html_body;
    private JTextPane tp_html;

    private void renderHtml(String html)
    {
        tp_html.setContentType("text/plain");
        tp_html.putClientProperty(JEditorPane.HONOR_DISPLAY_PROPERTIES, true);
        tp_html.setContentType("text/html");
        tp_html.setText("<html>"+html+"</html>");
    }

    private void renderHtml(String html_body, String style)
    {
        if (style==null) renderHtml(html_body);
        else renderHtml("<head><style>\n"+style+"\n</style></head><body>"+html_body+"</body>");
    }

    private void doHtmlRender()
    {
        String
            t_html_body = ta_html_body.getText(),
            t_css = ta_css.getText();
        renderHtml(t_html_body, t_css);
    }

    public FenetreRenduHtml()
    {
        setTitle("Test d'affichage en HTML");
        Dimension d = new Dimension(800, 600);
        setSize(d);
        setMinimumSize(d);
        setLocation(new Point(200, 100));
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        p_content = new JPanel();
        p_content.setBorder(new EmptyBorder(5, 5, 5, 5));
        setContentPane(p_content);
        GridBagLayout gbl = new GridBagLayout();
        gbl.columnWidths = new int[]{0, 0, 0};
        gbl.rowHeights = new int[]{0, 0, 0, 0, 0, 0};
        gbl.columnWeights = new double[]{1.0, 1.0, Double.MIN_VALUE};
        gbl.rowWeights = new double[]{0.0, 1.0, 0.0, 1.0, 0.0, Double.MIN_VALUE};
        p_content.setLayout(gbl);

        Font f_mono = new Font("monospaced", Font.PLAIN, 14);
        Border text_border = BorderFactory.createEmptyBorder(4, 4, 4, 4);

        JLabel l_css = new JLabel("Contenu CSS");
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.insets = new Insets(0, 0, 5, 5);
            gbc.gridx = 0;
            gbc.gridy = 0;
            p_content.add(l_css, gbc);
        }

        JScrollPane sp_css = new JScrollPane();
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.insets = new Insets(0, 0, 0, 5);
            gbc.fill = GridBagConstraints.BOTH;
            gbc.gridx = 0;
            gbc.gridy = 1;
            p_content.add(sp_css, gbc);
        }

        ta_css = new JTextArea();
        ta_css.setFont(f_mono);
        ta_css.setBorder(text_border);
        ta_css.setText("/* Style CSS ici */");
        sp_css.setViewportView(ta_css);

        JLabel l_html = new JLabel("HTML source");
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.insets = new Insets(0, 0, 5, 5);
            gbc.gridx = 0;
            gbc.gridy = 2;
            p_content.add(l_html, gbc);
        }

        JScrollPane sp_html_body = new JScrollPane();
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.insets = new Insets(0, 0, 0, 5);
            gbc.fill = GridBagConstraints.BOTH;
            gbc.gridx = 0;
            gbc.gridy = 3;
            p_content.add(sp_html_body, gbc);
        }

        ta_html_body = new JTextArea();
        ta_html_body.setFont(f_mono);
        ta_html_body.setBorder(text_border);
        sp_html_body.setViewportView(ta_html_body);

        JButton b_disp_html = new JButton("Afficher \u2192"); // "Afficher ->"
        b_disp_html.addActionListener(new ActionListener()
        {
            public void actionPerformed(ActionEvent e)
            { doHtmlRender(); }
        });
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.insets = new Insets(0, 0, 5, 5);
            gbc.gridx = 0;
            gbc.gridy = 4;
            p_content.add(b_disp_html, gbc);
        }

        JLabel l_disp_html = new JLabel("HTML affiché");
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.insets = new Insets(0, 0, 5, 0);
            gbc.gridx = 1;
            gbc.gridy = 0;
            p_content.add(l_disp_html, gbc);
        }

        JScrollPane sp_html = new JScrollPane();
        {
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.fill = GridBagConstraints.BOTH;
            gbc.gridx = 1;
            gbc.gridy = 1;
            gbc.gridheight = 3;
            p_content.add(sp_html, gbc);
        }

        tp_html = new JTextPane();
        sp_html.setViewportView(tp_html);
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                FenetreRenduHtml frame = new FenetreRenduHtml();
                frame.setVisible(true);
            }
        });
    }
}

Here is the css code I put in the GUI :这是我放在 GUI 中的 css 代码：

h1 {
    background : solid #3b82f7; 
    font-size : 15 ; 
    font-weight : normal;
    color : #FFFFFF; 
    padding : 2px; 
}
h2 {
    background : solid #3c3c3c; 
    font-size : 15 ; 
    font-weight : normal;
    color : #FFFFFF;
    padding : 2px; 

}

And here is the html code I put in the GUI :这是我放在 GUI 中的 html 代码：

<html>
<div>
    <div align = right width=70%>
        <h1>
            Hello, i'm trying to put this on the right side of the screen but i can't manage to do it
        </h1>
    </div>
    
</div>

<div align=left width=70%>
    <h2>
        And this is supposed to stay here so it's okay 
    </h2>
</div>
</html>

@hfontanez here is what I got with your code : @hfontanez这是我从你的代码中得到的：

Answer 1

I have totally changed my answer.我完全改变了我的答案。 This will be my last try.这将是我最后一次尝试。

HTML with Styling带样式的 HTML

<!DOCTYPE html>
<html>
<head>
<title>YOUR TITLE</title>
<style>
.parent{
  font:         14px/1.23 sans-serif;
  display:      table;
  table-layout: fixed;
  width:        100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

/* ROWS */

.message{
  display: table-row;
}

/* ALL CELLS */

.message > *{
  position:   relative;
  box-sizing: border-box;
  display:    table-cell;
}

/* MESSAGE CELLS */

.message p {
  color:      #ffffff;
  border-radius:4px;
  padding: 12px 14px;
  margin: 0 36px 0 0;
  background: #3c3c3c;
  width: 300px;
  padding: 10px;
}
.message.left {
  float: left;
}
.message.right p {
  float: right;
  margin: 0 0 0 36px;
  background: #0000ff;
}
</style>
</head>
<body>
    <div class="parent">

      <div class="message left">
        <p>Any luck?</p>
      </div>

      <div class="message right">
        <p> Hello, I'm trying to put this on the right side of the screen but i can't manage to do it</p>
      </div>

      <div class="message left">
        <p>Well... Seems to be working!</p>
      </div>
      
      <div class="message right">
        <p>AWESOME!</p>
      </div>
      
    </div> 
</html>

Result结果

If this doesn't work, then it is definitely an issue with Swing.如果这不起作用，那么这肯定是 Swing 的问题。

Java Swing渲染html在右侧对齐文本

问题描述

1 个解决方案

解决方案1
0 2022-01-08 15:18:23

HTML with Styling带样式的 HTML

Result结果

Java Swing渲染html在右侧对齐文本

问题描述

1 个解决方案

解决方案1 0 2022-01-08 15:18:23

HTML with Styling带样式的 HTML

Result结果

解决方案1
0 2022-01-08 15:18:23