I have a belief network, in which each node is a belief sentence:

In my analysis I want to decorate those sentence to make it like they are nodes:

(The colors are not matching, but I'll fix later)

Here is the CSS:

.beliefnode {
    border: 2px solid;
    border-radius: 40px;
    background-color: #D1E4DD;
    padding: 0px 12px;

It's nice, but the problem starts when the nodes spanning across lines:

If they are in a table they even looks weird:

I'm thinking about putting them in a div instead of a span, but for the ones spanning in two lines, in which the first part is at the end of the line, the second one is at the beginning of the next line, then using div is not really a solution:

Do you have any suggestion for this?

If I add display: inline-block;, it's even worse for tables:

Perhaps this is unsolvable, except only using font-weight and killing any background decoration?

  • Without knowing what final effect you would like to achieve, I can only ask you if you tried to add the property display: inline-block;. See also this answer, perhaps SO is best suited to your question. Jan 13 at 14:37
  • @PaoloGibellini I add an image to see the effect of using that property. Do you think it's acceptable?
    – Ooker
    Jan 13 at 17:52
  • At least the text doesn't give the impression of being broken... The acceptability depends however from your intents: have you drawn a mockup of the expected results? It may help. Jan 14 at 9:03
  • You can also try Graphviz. Jan 14 at 9:14
  • With the fragments scattering between lines, I guess the only solution for this is to kill the background and only changing the text style (color, typeface, weight, outline, etc.), as Scott suggests? My intent is to keep the impression that the whole sentence is a node, but I haven't figured out how to only use text style to achieve that. I'm familiar with GraphViz, but I'm not sure how that be suitable in inline texts?
    – Ooker
    Jan 14 at 9:52

1 Answer 1


I'd suggest merely changing the color of text and killing any background decoration.

(Perhaps change the font-weight as well as color)

  • if there is no border before and after the string, then when two strings are next each other, they will look like one. Is there a way to fix that?
    – Ooker
    Jan 13 at 15:39
  • Hard to say.. without full context (I mean I can't read the lines :) )You might consider a simple vertical left and right border with a font color change rather than the rounded border and background. Or, alternating colors. There's also the possibility that you are over styling this and creating far more visual chaos than is necessary. It may be far more intuitive to readers than you are considering.
    – Scott
    Jan 14 at 0:47
  • well, the sentences are popular beliefs. You can use any quotes that you like to replace them. So you think that the current approach is creating more visual chaos? How to measure the degree of over-styling or the intuitiveness of the readers?
    – Ooker
    Jan 14 at 8:07
  • I think it's exceptionally overstyled for quotes. You have separation merely by the fact they are in list items, or paragraphs, or even simply quotation marks - make them italics and in quotes.. that's enough in my opinion.
    – Scott
    Jan 14 at 10:26
  • Well, since this is not just quote-analysis, but also graph-analysis, so I want to make the quotes be consistent with how long titles of nodes are styled in an actual graph. Yes I can make them simply, but I guess consistency is also important?
    – Ooker
    Jan 14 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.