Paragraph Play CSS assistance please

1

The following content placed in a tiddler, shows how to remove the blank line between paragraphs, after TiddlyWiki renders content (determines the <p> tags).

Try it on TiddlyWiki.com

<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
s
<p>Fourth paragraph.</p>


<p>Fifth paragraph.</p>

a
b

c

d

e


<style>
  p {
    margin: 0;
  }
  p + p {
    margin-top: 0; /* This removes the top margin of the second and subsequent paragraphs */
  }
</style>
  • Of particular note is the behaviour of a b c d e lines

The result looks like this;

First paragraph.
Second paragraph.
Third paragraph.
s
Fourth paragraph.
Fifth paragraph.
a b
c
d
e

Can anyone tell me how to move the <style></style> section into a tiddler, with the tag stylesheet and defining a class?, that I can then add the class name to the tiddlers class field, to have this applied only to the current tiddler?

  • Unfortunately I have a gap in my knowledge about CSS to do this.

A Subsequent Question would be what if you now want to force a blank line in a particular place, how do you do it?

Thanks in advance
Tony

2

Create a tiddler:

title: test-styles
tags: $:/tags/Stylesheet

[data-tags*="custom-paragraph"] .tc-tiddler-body {
    p {
        margin: 0;
    }
    p + p {
        margin-top: 0; /* This removes the top margin of the second and subsequent paragraphs */
    }
}

Every tiddler that you tag: custom-paragraph will be styled that way

Concept can be found at: Custom styles by data-tags

Be aware: the CSS uses nested styles, which are not supported by old browsers. See: Using CSS nesting - CSS | MDN

Add <br><br> at the end of the line

3

This part of your CSS is superfluous and can be removed.

4

If you remove p + p you do not need nesting anymore so the following should be enough.

[data-tags*="custom-paragraph"] .tc-tiddler-body p {
    margin: 0;
}
5

Good to also see the same result in the preview pane.

6

And for those who wouldn’t go as far as @TW_Tones in making new-paragraph indistinguishable (spacing wise) from wraps and <br>, I like this variant (which uses class field tight-vertical, to reduce tag-clutter:

.tight-vertical .tc-tiddler-body p {
    margin: 0.4em 0 0 0;
}

Do you know how to make this happen?

7

@pmario

Thanks for your solution however I did really want to introduce this style through the class field on selected tiddlers.

I don’t like consuming tags with formatting and prefer to move such presentation settings to a field which I expect to set and forget. Tags are always visible, so hard to forget.

Also the class field permits a “list” of modifying classes and I want to leverage this approach for other classes.

8

If you set a class field to custom-paragraph the CSS needs to look like this:

,custom-paragraph .tc-tiddler-body p {
    margin: 0;
}