Is there a simple way to a additional text formatting functions

,
#1

Hell TW Experts,

I know the build in functions to format the text like bold, italic, quote, block, etc.
I know also to add stylesheets to $:/tags/Stylesheet.

Is there a possibility to add functions like “right orientation” with “rrr” or “two columns” with “ccc2” and other self defined Stylesheet functions and, maybe, also to have a button for this in the edit mode of the tiddlers?

Example:

Text Text Text Text Text Text

rrr
right right right right right
right right right right right
right right right right right
rrr

Text Text Text Text Text Text

Will be formatted like this (I am using space as placeholder here but is should right oriented :slight_smile: ):

Text Text Text Text Text Text

                                                     Text Text Text Text Text Text 
                                                     Text Text Text Text Text Text 
                                                     Text Text Text Text Text Text

Text Text Text Text Text Text

Thank you for any help here.
Stefan

1 Like
#2

Well, you could create a custom widget like this:

\widget $r.r.r()
<div style="text-align:right;">
<$slot $name="ts-raw"/>
</div>
\end

Remember that custom widgets that do not override existing widgets must contain at least one “.” so I put a period between each letter “r” to align with your example.

You would then call it like this:

Text Text Text Text Text Text

<$r.r.r>
Testing
</$r.r.r>

Text Text Text Text Text Text

As for having a button, that is also possible by creating an Editor Toolbar button that surrounds the selected text with that widget text.

Make a tiddler for the button with a title something like “$:/yourname/button/EditorToolbar/right-align” and with the tag $:/tags/EditorToolbar, then use the following content fields:

condition: [<targetTiddler>type[text/vnd.tiddlywiki]]
caption: Right Align
description: Right Align
icon: whatever icon you want to use

And the following content:

<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="wrap-selection"
	prefix="<$r.r.r>"
	suffix="</$r.r.r>"
/>

The icon will appear in the Editor Toolbar, and when you highlight some text and click on it, it will look like this:

<$r.r.r>Testing</$r.r.r>

or this for a longer text block:

<$r.r.r>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</$r.r.r>
2 Likes
#3

A custom widget is not needed here.

First, add a CSS class definition in a tiddler tagged with $:/tags/Styleshee, like this:

.rrr { text-align:right; }

Then, in your content, you can write:

left stuff here

@@.rrr
this content is right aligned
@@

more left stuff here

The rest of @CasperBooWisdom’s response (how to add an Editor Toolbar button) is essentially the same, except that the prefix and suffix params should change to:

prefix="@@.rrr"
suffix="@@"

enjoy,
-e

2 Likes
#4

Hello @EricShulman,
Hello @CasperBooWisdom,

I tried to use a mixture of Erics and Caspars solution.

I added to my stylesheets these 3 lines

.ptt { float: left; }

.tpt { float: center; }
 
.ttp { float: right; }

If I use them with text like

@@ptt
TEXT
@@

it working well.
But if I use it with a picture it will be ignored.

@@.tpt
[img width=75% [StefansPicture]]
@@

@CasperBooWisdom : The Buttons are awesome. I created in the meantime nearby 10 of them.

Is there something special if I want to float text around images?

Thx in advance
Stefan

#5

FYI: when you have a class defined like .ttp or .rrr` they can be introduced to most wiki syntax symbols;

try this

<style>
.rrr { text-align:right; }
</style>

;.rrr text
:.rrr item

As above you can wrap things in @@ but also all the standard html tags

<div class="rrr">
a div moved to the right
</div>