Hi,
I tried this and lost formatting: there were no line breaks or new lines just one long paragraph.
Is there a way to keep the formatting - font formatting is easy; this, not so much. I intended to use word quite a bit.
Thank you,
Parodocs
To confirm: you see the paragraph breaks in the tw edit mode, right? But they don’t show up in view mode, and that’s the problem?
This issue isn’t specific to word or any other editor. Tiddlywiki by default requires two line breaks to separate paragraphs, and will wrap multiple lines into a paragraph until/unless there is a blank line between.
You can override this behavior with a stylesheet. For example:
[data-tags~="less-wrap"] .tc-tiddler-body {
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
}
[EDITED, to use ~=
which is usually better than *=
— see below]
… will apply less wrapping to anything with the less-wrap
tag, allowing line breaks to work just as they do in programs like Word.
I have a solution like this for poetry and lyrics tags.
You could remove the [data-tags~="less-wrap"]
part entirely, but it’s conceivable some other community solutions, if you borrow them, will behave oddly if all tiddlers have this behavior. See what you like!
See also this thread: Hard linebreaks - #2 by Springer
Hi,
Thank you, this is perfect as I will be adding poetry as well.
I inserted the code into a tiddler set as a stylesheet, how do I use it from here? and can it be used with a css class? I’m using a class to change the font and text justification.
Parodocs
for only occasional use this wikitext form may be sufficent,
before
"""
this
is text
without
line breaks and wrapping
"""
after
Alternativly there are other conversion paths such as saving the word document as html/xml and importing that but the issue has multiple paths that can be chosen for different use cases.
If you used it exactly as I pasted it in (specifying the less-wrap
tag), then just add the tag less-wrap
to the tiddlers where you’d like to bypass the unexpected paragraph-wrapping behavior.
Obviously, you can change the tag to anything you like. If you tend to use Microsoft Word for tiddlers in the “notes” category, or whatever, then changing the css to target [data-tags*="notes"]
would be sensible. (To explain the *=
syntax: the asterisk ensures that the style applies even if other tags are present. [EDIT: But see reasons to use ~=
, instead, below!] The =
by itself would apply only when there’s exactly that one tag.)
The stylesheet solution suggested above doesn’t require using the class field, and should be compatible with any other css-based class specifications you would use for tiddlers (unless of course some assigned css class makes conflicting specifications about word-break, word-wrap, or white-space).
If you simply want to make this simply apply everywhere in your wiki without the need to specify a tag, you can leave out the tags constraint (start the stylesheet content just from .tc-tiddler-body
), though that may display some unexpected results for tiddlers authored by others.
The issue one needs to be aware of is that *=X
will match ANY occurrence of “X”. So whatever choice you make, you need to be sure you’re not matching any surprises:
[data-tags*="less-wrap"] matches "hopeless-wrapper"
[data-tags*="notes"] matches "school-notes" and "denotes" and "notestablished"
See https://tiddlywiki.com/#Custom%20styles%20by%20data-tags, which includes the following under “More Possibilities”:
[attr~=“value”]
Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly “value”.
Thus, to match a specific tag value, such as “notes”, without also matching other tag values that CONTAIN “notes” (e.g., “denotes”, “notestablished”), use ~=
instead of *=
, like this:
[data-tags~="less-wrap"] .tc-tiddler-body {
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
}
enjoy,
-e
Which, it should be mentioned, cannot be used to match – in this case a tag --containing "two or more words"
, like "less wrap"
or "my tag"
. Mozilla should have copied the entire text from the spec – then TiddlyWiki docs might have done so, too:
[att~=val]
Represents an element with the
att
attribute whose value is a white space-separated list of words, one of which is exactly “val”. If “val” contains white space, it will never represent anything (since the words are separated by spaces). If “val” is the empty string, it will never represent anything either.
It’s hard to say (or advise) on “which is best”. Your choice will be steered by your data (tag names) and least likelihood of missteps.