Can I reduce the spacing between paragraphs?

845 views
Skip to first unread message

Grant

unread,
May 25, 2011, 2:43:21 AM5/25/11
to tiddl...@googlegroups.com
Hi,
How do I control the standard space between paragraphs, bulleted items, etc?  I am using, for example, NoteStorm, and it puts a very large space in this cases, which is both inefficient and not very readable.  Where as TWT-Treeview • Executive is formatted much more to my liking.  I assume its in the stylesheet, but I am not an css expert, so you will have to be specific.  Or, if there is a good short tutorial on how to change the items in a typical stylesheet of TiddlyWiki, then I am game to learn too!
Thanks,
Grant

Sub

unread,
May 25, 2011, 7:13:22 AM5/25/11
to TiddlyWiki
I'd like that too, but it's currently impossible.

Mainly because the systems converts it to Text<br><br>Text which you
can't affect via CSS.

But real <p> tags generated by the system would be hard

Can't bump this old topic:
http://groups.google.com/group/tiddlywiki/browse_thread/thread/7196ce49855b11c9/9b1812a9b72c760f?hl=en&lnk=gst&q=proper+paragraphs#9b1812a9b72c760f

Maybe someone could take a look at how MediaWiki's parser does it and
if it could be adapted.

For now you could define the line-height for text inside tiddlers and
margin-bottom for ul, ol and / or li.

Alex Hough

unread,
May 25, 2011, 9:17:09 AM5/25/11
to tiddl...@googlegroups.com
You could also use wiki markup for definitions

try
; starting a paragraph with a semi-colon like this
: or a colon, then change the CSS

best wishes

Alex

> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To post to this group, send email to tiddl...@googlegroups.com.
> To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.
>
>

passingby

unread,
May 25, 2011, 9:53:40 AM5/25/11
to tiddl...@googlegroups.com
I think one could use HTML markup in your tiddler by enclosing content in <html></html>. But this does not affect whole TW, only the specific tiddlers.

Sub

unread,
May 25, 2011, 3:33:26 PM5/25/11
to TiddlyWiki
Inside <html></html>: no way. that's not a solution. Same for a new
wiki markup definition. You wouldn't use it.

axs

unread,
May 25, 2011, 4:12:44 PM5/25/11
to tiddl...@googlegroups.com
To remove spaces before/after lists, put the following in your stylesheet:

ul {
     margin:0px;
}

Yakov

unread,
May 26, 2011, 8:21:22 AM5/26/11
to TiddlyWiki
As for paragraphs, it seems that the only way is to make a plugin
which would convert the double <br /> elements to some spacer.

As for lists, axs has answered the question. Keep in mind that the
ordered lists need another definition ("ol" selector instead of "ul").
You can also make space between lists change when you need them to, by
writing

{{spacedList{
* ...
* ...
}}}

with the following CSS:

.spacedList * LI { margin: ... ; }

axs

unread,
May 26, 2011, 1:02:28 PM5/26/11
to tiddl...@googlegroups.com
Hi folks,

There is a new plugin [1] out that replaces consecutive line breaks with a single linebreak whose styling can be controlled. Check it out!

Regards,
axs

Yakov

unread,
May 26, 2011, 3:52:23 PM5/26/11
to TiddlyWiki
Fast response. Good work. Nice illustration for newbie developers.
Thanks!

PS perhaps you should make a note that changes in StyleSheet apply
after restart (though, I suspect this can be changed, but would
require some digging).

PMario

unread,
May 26, 2011, 4:02:39 PM5/26/11
to TiddlyWiki
Hi Grant,
Notestorm [1] seems to use the following CSS in the StyleSheet
tiddler. If you could point me to the initial version, of notestorm
you are using, I can verify.

[[StyleSheet]]
.viewer li {padding-top: 0.5em; padding-bottom: 0.5em;}

Just change it to

/* .viewer li {padding-top: 0.5em; padding-bottom: 0.5em;} */

which deactivates / comments the CSS.

[1] http://notestormproject.tiddlyspot.com/

Yakov

unread,
May 26, 2011, 4:15:58 PM5/26/11
to TiddlyWiki
Also, you should probably make the Source slice in the description. I
mean,

|Source|http://axs.tiddlyspot.com/#LineBreakPlugin|

axs

unread,
May 26, 2011, 5:24:57 PM5/26/11
to tiddl...@googlegroups.com
Yakov, 

Thanks for the suggestions. I've updated the plugin to allow live edits/updates to the style. 

Regards,
axs

Grant

unread,
May 27, 2011, 11:00:12 AM5/27/11
to TiddlyWiki
Thanks, this worked in a normal tiddlywiki, but NoteStorm seems to
have a differnt type of stylesheet coding, everything starting with a
'.' and when I add your code in nothing happens. Guess I just dont
know where to put it...

Grant

unread,
May 27, 2011, 11:06:44 AM5/27/11
to TiddlyWiki
Neat, what in one tiddlywiki I have the buttons do not open the box
where I can edit the values, and in NoteStorm I can edit the
parameters, but they dont do anything really, unless I add extra
spaces in a list and then it looks the same as always... so I am
clueless I guess to see how this helps.. might be my tiddlywikies...

Grant

unread,
May 27, 2011, 11:07:56 AM5/27/11
to TiddlyWiki
OK, that makes the lists more compact in Notestorm, but I still have
an extra space above and below the lists, more than between say normal
paragraphs even... so it still is not quite what I want..

PMario

unread,
May 27, 2011, 11:18:35 AM5/27/11
to TiddlyWiki
On May 27, 5:07 pm, Grant <grant...@gmail.com> wrote:
> OK, that makes the lists more compact in Notestorm, but I still have
> an extra space above and below the lists, more than between say normal
> paragraphs even... so it still is not quite what I want..

You can insert the following CSS near the list definition you
disabled.

.viewer ul, .viewer ol {
margin-top: .5em;
margin-bottom: .5em;
}

which will reduce the space in front and at the bottom by half.
1 em .. 16px depending on your browser settings.

ul .. unordered list -> TW syntax: * list
ol .. ordered list -> TW syntax: # list

-m

PMario

unread,
Jun 5, 2011, 5:57:42 AM6/5/11
to TiddlyWiki
@Grant
did it work?
-m

Sub

unread,
Jun 5, 2011, 11:39:29 AM6/5/11
to TiddlyWiki
thanks. http://axs.tiddlyspot.com/#LineBreakPlugin works great.
I use .multipleLinebreak {margin-top:3px}

Sub

unread,
Jun 5, 2011, 12:44:31 PM6/5/11
to TiddlyWiki
Bug: Doesn't work after ul, ol, pre.

axs

unread,
Jun 5, 2011, 9:04:39 PM6/5/11
to tiddl...@googlegroups.com
sub, 

That is not a bug, it's just not a feature that I targeted with the plugin. I targeted 2+ linebreaks to be converted to 1 element with a specified styling. A list inserts only one linebreak after it, and therefore it is ignored by my plugin. I'll try to make it insert two linebreaks after lists, and then it'll target them. If I get it working, I'll post an update to this thread.

Regards,
axs

axs

unread,
Jun 5, 2011, 11:31:59 PM6/5/11
to tiddl...@googlegroups.com

Grant, I don't quite get this: are you saying ti works in some of your TW's but not in others? Do you have an example tiddlywiki online that we can look at to help troubleshoot?

Regards,
axs

Grant

unread,
Jun 6, 2011, 2:35:19 AM6/6/11
to TiddlyWiki
Yup, Thanks!
However I had to reduce the line spacing to 0em... I guess NoteStorm
has somehow implemented a large spacing as standard between lines. Is
there a place or way I can reduce that too?

On Jun 5, 11:57 am, PMario <pmari...@gmail.com> wrote:
> @Grant
> did it work?
> -m

Grant

unread,
Jun 6, 2011, 2:48:31 AM6/6/11
to TiddlyWiki
Hi Axes,
In NoteStorm it does work I see now. In part I did not understand how
your plugin worked, and in part the already large standard line
spacing of NoteStorm made it hard to recognize the results with lower
valuens entered. Regarding the other Tiddlywiki, I think we should
not worry about it - its one I have been hacking for years and so it
probably just a one-off case.
Thanks again!
Grant

PMario

unread,
Jun 6, 2011, 3:52:38 AM6/6/11
to TiddlyWiki
you can compare the shadow tiddlers

[1] http://notestormproject.tiddlyspot.com/#StyleSheetColors
[2] http://notestormproject.tiddlyspot.com/#StyleSheetLayout

with your user StyleSheet
[3] http://notestormproject.tiddlyspot.com/#StyleSheet

[1] and [2] contain the TW defaults

-m

Sub

unread,
Jun 12, 2011, 1:06:20 PM6/12/11
to TiddlyWiki
.multipleLinebreak {margin-top:3px}

/* remove br space pre boxes when followed by heading */
pre+br+h1, pre+br+h2, pre+br+h3, pre+br+h4, pre+br+h5, pre+br+h6
{margin-top:-5px !important}

/* remove space below lists when followed by heading */
ul+br+h1, ul+br+h2, ul+br+h3, ul+br+h4, ul+br+h5, ul+br+h6,
ol+br+h1, ol+br+h2, ol+br+h3, ol+br+h4, ol+br+h5, ol+br+h6
{margin-top:-8px !important}
Reply all
Reply to author
Forward
0 new messages