Java: HTML in Swing, link margin not working

Question

Hi there
I'm trying to format HTML content in Swing. Formattings such as color or text-decoration are working fine. But when it comes to margin of links it is not working at all.

This is all the CSS syntax I'm using:

StyleSheet styleSheet = kit.getStyleSheet();
styleSheet.addRule("a {font : arial; text-decoration: none; color: #0174DF; margin-left: 50px}");

everything, except the margin-left is working. I tested the syntax in a Browser and it works fine there. I also tried using text-align: left or display: block becouse I found some articles pointing out that margin of links would not work without.

The following HTML code is used:

<html><head></head><body><div>
<a href="http://www.zhaw.ch" style="font-size: 50.24324324324324px">akamaitechnologies.com</a>
<a href="http://www.zhaw.ch" style="font-size: 17.37837837837838px">amazonaws.com</a>
<a href="http://www.zhaw.ch" style="font-size: 18.243243243243242px">cotendo.net</a>
<a href="http://www.zhaw.ch" style="font-size: 24.08108108108108px">facebook.com</a>
<a href="http://www.zhaw.ch" style="font-size: 17.594594594594597px">google.ch</a>
<a href="http://www.zhaw.ch" style="font-size: 55.0px">heise.de</a>
<a href="http://www.zhaw.ch" style="font-size: 16.08108108108108px">ip-plus.net</a>
<a href="http://www.zhaw.ch" style="font-size: 21.054054054054056px">ligatus.com</a>
</div></body></html>

The HTML code is generated by a library and can't be modified.

From my understanding of HTML/CSS it is not possible to add margin style information to an inline object like a link becouse margin-top or margin-bottom is not possible. margin-left oder margin-right however should not be a problem.

thx

edit: by the way, I'm using HTMLEditorKit.

@ rob wrote 'The HTML code is generated by a library and can't be modified.' just info todays Java supported Html <= 3.2 — mKorbel, Apr 27 '11 at 14:12
@rob: `"font-size: 50.24324324324324px"` You expect to control font size to within one 100 trillionth of a pixel? — Andrew Thompson, Apr 27 '11 at 14:27
@Andrew Thompson: As I wrote, the html code is generated by a library I have no influence on that. But I thought the same as you when I saw the output. @mKorbel: so margin style information is not supported in HTML 3.2? If so, is there a workaround to add some margin to the links in the code mentioned? — rob, Apr 27 '11 at 14:36
@Vincent: "would padding-left work for you?" +1 Works for me. ;) — Andrew Thompson, Apr 27 '11 at 15:06
@rob: Why do *all* the HREFs point to `www.zhaw.ch`? (Not really relevant to your question, it just has me curious.) — Andrew Thompson, Apr 27 '11 at 15:09
@Andrew Thompson: I abuse this library to generate the HTML code: http://opencloud.mcavallo.org/. It is not working to generate HTML code without a link so I added a default one becouse the link functionality is not needed in my software. — rob, Apr 27 '11 at 16:12

Andrew Thompson · Accepted Answer · 2011-04-27T16:54:55.523

This is my last attempt before I give up or go mad (or both).

TestHtmlIndent.java

import javax.swing.*;

class TestHtmlIndent {

    public static void main(String[] args) {
        String raw =
            "<html><head></head><body><div>" +
            "<a href=\"http://a.b\" style=\"font-size: 20px\">akamaitechnologies.com</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 17px\">amazonaws.com</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 18px\">cotendo.net</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 24px\">facebook.com</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 17px\">google.ch</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 25px\">heise.de</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 16px\">ip-plus.net</a>" +
            "<a href=\"http://a.b\" style=\"font-size: 21px\">ligatus.com</a>" +
            "</div></body></html>";
        String style =
            "<style type='text/css'>" +
            "body {width: 600px;}" +
            ".cloudLink {text-decoration: none; color: #0174DF; " +
            "font-family: helvetica, arial, sans-serif;}" +
            "</style>";
        raw = raw.replace("<head></head>", "<head>" +  style + "</head>");
        String space4 = "&nbsp;&nbsp;&nbsp;&nbsp";
        String space20 = space4 + space4 + space4 + space4 + space4;
        final String processed1 = raw.replace(
            "<a ", space20 + "<a class='cloudLink' ");

        Runnable r = new Runnable() {
            public void run() {
                JOptionPane.showMessageDialog(null, processed1);
            }
        };
        SwingUtilities.invokeLater(r);
    }
}

Screenshot

enter image description here

thx for your effort! padding on the div tag is working and gives me the hope that there is a way to accomplish a solution to my problem(I assume that if padding is implemented, margin is aswell). But I need margin between each of the links becouse there is no line breack between them. Big sorry if this was not clear. The whole thing is supposed to be a tag cloud. — rob, Apr 27 '11 at 15:08
Good idea! It looks like the padding of the wrapped divs works. But the each div with a link in it is on a new line now even if there would be enough space to have several divs next to each other per line. Is there a way to prevent this? — rob, Apr 27 '11 at 16:02
It seems block level elements lose their padding when made into `display: inline` elements. So that is me out of ideas for the moment. :( — Andrew Thompson, Apr 27 '11 at 16:25
Let's say it is the brute force version =) Thx very much for your effort! This works for me. Thx! — rob, Apr 27 '11 at 19:21

score 0 · Answer 2 · answered Apr 27 '11 at 15:10

It should work. You can add left and right margins to inline-elements (not so top and bottom margins) Maybe your styleSheet.addRule fails?

What's the generated HTML Code? It tried the code below and it works. Maybe the margin gets overridden in some stylesheet. Did you check with firebug?

<html>
<head>
<style>a {font : arial; text-decoration: none; color: #0174DF; margin-left: 50px}</style>
</head>
<body>
    <div>
        <a href="http://www.zhaw.ch" style="font-size: 50.24324324324324px">akamaitechnologies.com</a>
        <a href="http://www.zhaw.ch" style="font-size: 17.37837837837838px">amazonaws.com</a>
        <a href="http://www.zhaw.ch" style="font-size: 18.243243243243242px">cotendo.net</a>
        <a href="http://www.zhaw.ch" style="font-size: 24.08108108108108px">facebook.com</a>
        <a href="http://www.zhaw.ch" style="font-size: 17.594594594594597px">google.ch</a>
        <a href="http://www.zhaw.ch" style="font-size: 55.0px">heise.de</a>
        <a href="http://www.zhaw.ch" style="font-size: 16.08108108108108px">ip-plus.net</a>
        <a href="http://www.zhaw.ch" style="font-size: 21.054054054054056px">ligatus.com</a>
    </div>
</body>

styleSheet.addRule is "working". Changes to the color or text decoration apply to the output. But I will try to add the style rules directly into the html as you did with ``. — rob, Apr 27 '11 at 15:13
then your margin must get overidden. Try adding "!important" after margin-left: 50px — wosis, Apr 27 '11 at 15:17
the String looks now like `...` i don't use the `styleSheet` of HtmlEditorKid anymore. All the style settings are working except the `margin-left` — rob, Apr 27 '11 at 15:45
that's odd. There must be some small error. BTW: You should use font-family:arial instead of font:arial — wosis, Apr 27 '11 at 15:54

Java: HTML in Swing, link margin not working

2 Answers2

TestHtmlIndent.java

Screenshot

Linked