[Solution] Preserving Paragraphs or using new line to indicate Paragraphs

[TonyM]

Folks,

I just found a solution to an issue which bugs a lot of new and experienced users alike, many come to be happy by adapting to it, however when they bring text in from elsewhere the issue rears its head again.

[Edit] This lead thread is soon to be updated with information from replies, read the whole thread before deciding if this is for you until then. The Retain call on text you want to retain formatting, in should be fine, but only use simple markup there until I update: Thank you.

Problem: Consider Source Text as follows in a tiddler 

line a

line b
line c


Line d

Gets displayed as

line a

line b line c

Line d

That is the author or source of text requires two enters resulting in a blank line before it is treated as a new paragraph, other wise the line is appended to the previous line.

See also that the source text has two line between line c and line b, yet rendering collapses this to one line, this will not change with this solution

Be aware there are good reasons for this behaviour and attempts at fixing it have tended to be cumbersome.

As I posted in this thread Preserving paragraphs when pasting into TW (answer reproduced here) I think I have found a useful solution that can be applied in a few different ways.

• This solution also allows wikitext markup to be applied to pasted text, allowing subsequent markup.

Additional solutions have being Identified

• Marios solution uses a Tag to indicate tiddlers needing hard line breaks (Mat also supports the tag approach) 
• Use this for whole of tiddler applications

Notes

• pre-wrap; The below examples have being updated to use the pre-wrap (not a simple pre) to cover more cases correctly (Thanks Riz)
• I want to point out my whole of tiddler solution 3, using class, solution is only applying this to html p or paragraph elements generated by tiddlywiki, 
• Preview will not necessarily reflect what happens with whole of tiddler solutions

Background 1st solution

If you wrap a block of text in a section or other html blocks and use a style to use the same white spacing as pre you will get text that behaves like was intended in the source text.

Using a blank line after the first html tag ensures any wikitext markup is honored.

<section  style="white-space: pre-wrap;">
blank line here
!Marked

Your pasted text Wikitext markup if desired
</section>

2nd Solution

Of course you can create a css class eg "retain" and apply it like this as well (define in a tiddler tagged $:/tags/Stylesheet

eg

.retain { white-space: pre-wrap; }

@@.retain
;No Blank line needed for wiki text
Some text

some more text
@@

You can leave off the closing "@@" with no apparent ill effect

• The above is honored when transcluding this tidder

3rd Solution

There may be better ways but if on a given tiddler you wish to have a class applied to the whole content create a class field and give it the value of the class in the following format.

class=classname and the whole tiddler content will have class applied

However the class is applied at the very last moment, so the preview window does not apply it, and the rendered tiddler is wrapped in one or more `<p>` tags.

So let us define a class that uses the P selector to target the resulting paragraphs

.keep P { white-space: pre-wrap; }

and set the class field to keep

So the whole tiddler will honor this formatting, good for pasted content with line breaks considered paragraph breaks, and still permits wikitext.

• In this case unlike 1st and 2nd solutions this class is not honored in transclusions, which may a be good or bad 
• Use this to fix it, ie add the retain class to the section

@@.retain {{transcluded}}@@

In closing

Some of us may consider this a substantial improvement in usability others will see little or no value.

• What do you think?
• Have you other ideas?
• Feedback please

Regards

Tony(m)

[Anne-Laure Le Cunff]

Thanks so much for looking into this, Tony! Part of my use case is to export my notes as a static website. Is one of the three solutions better to export each paragraph as <p>paragraph</p>?

Thank you!

On Wednesday, May 13, 2020 at 3:02:24 AM UTC+1, TonyM wrote:

Folks,

I just found a solution to an issue which bugs a lot of new and experienced users alike, many come to be happy by adapting to it, however when they bring text in from elsewhere the issue rears its head again.

Problem: Consider Source Text as follows in a tiddler 

line a

line b
line c


Line d

Gets displayed as

line a

line b line c

Line d

That is the author or source of text requires two enters resulting in a blank line before it is treated as a new paragraph, other wise the line is appended to the previous line.

See also that the source text has two line between line c and line b, yet rendering collapses this to one line, this will not change with this solution

Be aware there are good reasons for this behaviour and attempts at fixing it have tended to be cumbersome.

As I posted in this thread Preserving paragraphs when pasting into TW (answer reproduced here) I think I have found a useful solution that can be applied in a few different ways.

• This solution also allows wikitext markup to be applied to pasted text, allowing subsequent markup.

Background 1st solution

If you wrap a block of text in a section or other html blocks and use a style to use the same white spacing as pre you will get text that behaves like was intended in the source text.

Using a blank line after the first html tag ensures any wikitext markup is honored.

<section  style="white-space: pre;">

blank line here
!Marked

Your pasted text Wikitext markup if desired
</section>

2nd Solution

Of course you can create a css class eg "retain" and apply it like this as well (define in a tiddler tagged $:/tags/Stylesheet

eg

.retain { white-space: pre; }

@@.retain
;No Blank line needed for wiki text
Some text

some more text
@@

You can leave off the closing "@@" with no apparent ill effect

• The above is honored when transcluding this tidder

3rd Solution

There may be better ways but if on a given tiddler you wish to have a class applied to the whole content create a class field and give it the value of the class in the following format.

class=classname and the whole tiddler content will have class applied

However the class is applied at the very last moment, so the preview window does not apply it, and the rendered tiddler is wrapped in one or more `<p>` tags.

So let us define a class that uses the P selector to target the resulting paragraphs

.keep P { white-space: pre; border: 2px solid blue; }

and set the class field to keep

[PMario]

Hi Tony,

There is a similar approach described at tiddlywiki.com since V5.1.16.

The description is: Hard linebreaks with custom styles.

The only thing to do is:

Create a tiddler nammed eg: preserve-breaks

tagged with: $:/tags/Stylesheet

with the following content:

[data-tags*="preserve-breaks"] .tc-tiddler-body {
  word-break: normal; 
  word-wrap: break-word;
  white-space: pre-wrap;
}

To use it, you only need to tag a content tiddler with: preserve-breaks

To get an overview, where you used it: Create a tiddler eg: Tiddlers using hard line-breaks whith the content: 

! These tiddlers are special

<<list-links "[tag[preserve-breaks]]">>

That's it!

The advantages are:

• No special syntax needed.
  
• Only copy paste and tag the tiddler.
  
• This tag also helps you to find content that needs review
  
• Every "special" tiddler has a tag-dropdown, that will automagically list any other special tiddler.

The tag-name preserve-breaks is just a convention. You can use any other "shortcut" that fits your needs. You only need to change it in the code above. 

have fun!

You can drag and drop import the attached bundle to tiddlywiki.com to test it. 

There are some limitations!

It should only be used for "prose text". The special formatting may break macro and widget calls!

Mario

[Tony K]

isn't it the purpose of ?

"""

On Wednesday, May 13, 2020 at 5:02:24 AM UTC+3, TonyM wrote:

Folks,

I just found a solution to an issue which bugs a lot of new and experienced users alike, many come to be happy by adapting to it, however when they bring text in from elsewhere the issue rears its head again.

Problem: Consider Source Text as follows in a tiddler 

line a

line b
line c


Line d

Gets displayed as

line a

line b line c

Line d

That is the author or source of text requires two enters resulting in a blank line before it is treated as a new paragraph, other wise the line is appended to the previous line.

See also that the source text has two line between line c and line b, yet rendering collapses this to one line, this will not change with this solution

Be aware there are good reasons for this behaviour and attempts at fixing it have tended to be cumbersome.

As I posted in this thread Preserving paragraphs when pasting into TW (answer reproduced here) I think I have found a useful solution that can be applied in a few different ways.

• This solution also allows wikitext markup to be applied to pasted text, allowing subsequent markup.

Background 1st solution

If you wrap a block of text in a section or other html blocks and use a style to use the same white spacing as pre you will get text that behaves like was intended in the source text.

Using a blank line after the first html tag ensures any wikitext markup is honored.

<section  style="white-space: pre;">

blank line here
!Marked

Your pasted text Wikitext markup if desired
</section>

2nd Solution

Of course you can create a css class eg "retain" and apply it like this as well (define in a tiddler tagged $:/tags/Stylesheet

eg

.retain { white-space: pre; }

@@.retain
;No Blank line needed for wiki text
Some text

some more text
@@

You can leave off the closing "@@" with no apparent ill effect

• The above is honored when transcluding this tidder

3rd Solution

There may be better ways but if on a given tiddler you wish to have a class applied to the whole content create a class field and give it the value of the class in the following format.

class=classname and the whole tiddler content will have class applied

However the class is applied at the very last moment, so the preview window does not apply it, and the rendered tiddler is wrapped in one or more `<p>` tags.

So let us define a class that uses the P selector to target the resulting paragraphs

.keep P { white-space: pre; border: 2px solid blue; }

and set the class field to keep

[TonyM]

Anne-laure,

This would not support the generation of p tags in the output however if the class is available to the static tiddlers it should generate the same visual results.

However we, Mario and I, did investigate a dot paragraph method that would do this so we could complete that method if the p tag is necessary.

I am not an expert on css or static exports but I am confident of this.

Regards
Tony

[Mat]

To add to PMarios note - and maybe I'm stating the obvious but:

If you intend to use this for certain kinds of tiddlers, e.g blog posts, then you might already be using a designated tag for this (e.g "article"). Then you can use this as the tag that applies the styling instead of "preserve-breaks" or some such.

Too obvious? OK, never mind ;-)

<:-)

[Riz]

We can just do away with nuances and add this to $:/core/ui/ViewTemplate/body and call it a day.

Sincerely,
Riz

[TonyM]

Mat & Riz,

Give me the data tags code and I will add it to the lead thread.

And perhaps my blog If I piblish it.

Regards

Tony

[Riz]

Ok, do not actually do this, but for theory purposes.

@Tony. You slightly got the css property wrong. "white-space:pre" will not wrap at all. To see what I mean, copy and paste the following code to a new tiddler in tiddlywiki.com and see

<section  style="white-space: pre;">
blank line here
!Marked

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi augue, ultricies sed faucibus a, tristique rhoncus risus. Donec varius turpis hendrerit massa dapibus, sit amet dictum ipsum blandit. Aenean neque tortor, scelerisque ac elementum accumsan, iaculis quis odio. Vestibulum imperdiet aliquam justo eget aliquet. Maecenas sed magna quis lacus lobortis tincidunt. Proin eget consequat arcu. Aliquam rutrum orci id justo aliquam elementum. Nunc elementum commodo ligula, non interdum lorem fermentum et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer gravida efficitur metus. Integer faucibus interdum tortor, sed molestie odio ultricies sit amet. Vivamus ornare in sapien a porta.

Your pasted text Wikitext markup if desired

</section>

You can see that text goes beyond the edge of tiddler.

The property value we are looking for is pre-wrap. In the above code, try 'pre-wrap' where 'pre' is wriiten.

Now, ideally  we ought to be able to open up "$:/core/ui/viewtemplate/body" and add "style="white-space: pre-wrap;" to the reveal widget, we should be able to make every tiddler in the wiki follow the sane rules.

The reveal widget code would look like this

<$reveal tag="div" class="tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes" style="white-space: pre-wrap;">

However, the rest of CSS is build on the premise of non-existence of such a property. Which means, if you do this, some other UI elements will start looking weird. For eg; If you your own buttons to the body of a tiddler, they will look like they are bloated. If you add tabs to the body of a tiddler, they will look like somebody pulled them vertically.

In case your only intention is to add text/links/lists etc to tiddlers, the above would work.

Comes with the obligatory warning that you must not try this in a wiki in use - but in an empty wiki.

Sincerely,

Riz

[Mat]

TonyM wrote:

Mat & Riz,

Give me the data tags code and I will add it to the lead thread.

So, as PMario said:

tags: $:/tags/Stylesheet
text:
[data-tags*="YOURTAG"]  .tc-tiddler-body {

  word-break: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
}

However, note that there might be unintended consequences as this styling affects the whole tiddler body and you might have something else that you didn't want the style on....

<:-)

[TonyM]

[Edit] This lead thread and top post, is soon to be updated with information from replies, read the whole thread before deciding if this is for you until then. The Retain call on text you want to retain formatting, in should be fine, but only use simple markup there until I update: Thank you.

[TonyM]

TonyK

Not exactly and it will not honor simple wiki text. Its more uses full for code segments etc...

I have used that when pasting say email content into my notes and is great for my own use, but not really for publishing.

Regards

Tony

[TiddlyTweeter]

Ciao TonyM

I followed your several forays on this issue with great interest.

I want to make a few points that are about what I think is a common problem (this is much of your issue, though does not embrace everything)

1 - when you cut and paste into TW some plain text there is NO way of determining IF ...

Am I seen
as a line?

OR ...

Am I a paragraph 1 or just a sentence in a paragraph?
Am I paragraph 2 or just a sentence in paragraph 1?

2 - IF you copy-paste / import arbitrary text a lot wonderings may arise a lot too.

The solutions under discussion are focused on various solutions to the issue, but they are not facing the fundamental indeterminacy of (1).

FWIW, I can see merit in a "Content-Type" that is a converter. That specialises in CONFORMING arbitrary paragraphing to a TW standard by permanent changes to initial input data paragraphing. As soon as its done you switch Content Type to what you need standard.

IMO the approach to hack dynamic parsing to address the issues is over complicated. Better to put effort into permanently conforming input text to TW para conventions which work.

Best wished opinion :-)

TT

[TonyM]

Thanks TT

I am still working on this and I concur with your observation but can also have to do with the source and the copy method so it can get quite indeterminate.

I am currently playing with css on html and wiki text blockquotes. In some ways pasted text is quotable. What is I believe Importiant is to allow inline block and whole of tiddler.

Regards
Tony