On Wednesday, December 18, 2019 at 6:04:25 AM UTC-8, Chuck R. wrote:
>
> Basic info: TW5 using TW markup.
> Sometimes I want to hide text in a tiddler that only I see while in edit 
> mode. I have found that this works great: 
> <div style="display:none;">
> This is hidden text.
> </div>
>

The above code is, of course, standard HTML with "inline CSS".  To use 
actual TiddlyWiki syntax, you would write:

@@display:none;
This is hidden text
@@

Basically, the @@... @@ is TiddlyWiki's way of defining a "div" (or a 
"span") that wraps around a section of content, just like the 
<div>...</div> HTML syntax.  The text *immediately* following the opening 
"@@" and ending with a semi-colon (;) is standard CSS syntax.  If, for 
example, you didn't want to hide the text, but rather, show it with some 
styling applied, you could write something like:
@@color:red;
This is some warning text.  PAY ATTENTION!
@@

You can also string together a sequence of CSS attributes, like this:
@@color:red;font-size:400%;border:1px solid red;
WARNING!  DANGER WILL ROBINSON!
@@

As noted above, this is equivalent to
<div style="color:red;font-size:400%;border:1px solid red;">
WARNING!  DANGER WILL ROBINSON!
</div>

However, the <div> syntax always creates content on a line by itself.  If 
you want to do the same styles, but have the content appear "inline", you 
would use a <span>...</span> in place of the <div>...</div>, like this:
Then, the Robot said, <span style="color:red;font-size:400%;border:1px 
solid red;">WARNING! DANGER WILL ROBINSON!</span> as it flailed it's 
tubular arms wildly.

and, in TiddlyWiki syntax, this would be written as:
Then, the Robot said, @@color:red;font-size:400%;border:1px solid red; 
WARNING! DANGER WILL ROBINSON!@@ as it flailed it's tubular arms wildly.

You can find many excellent CSS technical references online.  For example, 
Mozilla (a browser developer), offers this reference for the CSS "border" 
syntax:
https://developer.mozilla.org/en-US/docs/Web/CSS/border

You can use that site (and others like it) to look up lots of CSS goodies 
that you can then incorporate into your content, using either HTML or 
TiddlyWiki "wrappers".
<https://developer.mozilla.org/en-US/docs/Web/CSS/border>
This should give you plently to start playing with.

enjoy,
-e
Eric Shulman
InsideTiddlyWiki: http://www.TiddlyTools.com/InsideTW (work-in-progress)

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/6b1a67e5-beb6-4fd2-a0df-8c39b727ed23%40googlegroups.com.

Reply via email to