TIP TW5: How to hide text

[Chuck R.]

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>

This also works great for hiding text in an EPUB file, which becomes XHTML. For example, sometimes when I convert a PDF to epub I want to hide the PDF page number inside the text without the reader seeing it.

[Mohammad]

Great!

Please keep doing this! Sharing your interesting findings!

Forum is a good place to learn! Sometimes ago TonyM posted a tip a day or a week,

but he stopped these useful posts!

Best

Mohammad

[Eric Shulman]

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".

This should give you plently to start playing with.

enjoy,

-e

Eric Shulman

InsideTiddlyWiki: http://www.TiddlyTools.com/InsideTW (work-in-progress)

[Mark S.]

You can also use the comment functionality of HTML. e.g.

<!--
My text I want to hide
-->

If you use CSS to hide text, you might consider defining your own class for that purpose. That way you could change the visibility of hidden text everywhere just by changing the CSS definition.

[Mohammad]

Added to TW Scripts

[TonyM]

Here is some other hide stuff tricks

\define mynote()
some stuff
\end

<$list filter="[{$:/config/debugmode}match[yes]]" variable=nul>
some stuff that will only show when in debug mode

</$list>

You can also place stuff inside a widget that does not display its content or is unlikely ever to do so.

Regards
Tony

[Mohammad]

nice, I added this to previous discussion in TW-Scripts

[A Gloom]

<div style="display:none;">

wise choice-- it also takes away its allocated space in the doc-- also woirks for many html elements like table columns,rows, cells

As Mohammad said, this forum makes a good reference source-- in a search I will find this topic and see the various ways to hide things suggested by you, Eric & Mark

I use the html comment "syntax" a lot myself but it has hazardous...

don't start typing <!-- especially if you have preview on-- it will attempt to turn everything after it in the tiddler into a comment and possibly cause the browser to hang

I always type <> first and then type !---- inside the angle brackets the type/paste the comment/content inside the <!---->

[A Gloom]

An addition,

In the table coding i need to get to Mohammad I use display:none to selectively collapse individual columns with buttons

[Torax Malu]

well, if such kind of information is so welcomed, I've an addition to the interpreter-template. I want to have for a special branch in my TW the option for interpretation e.g. JSON-Tiddler. The <$reveal>-Widget is very handy in combination with the CSS to hide the normal Tiddler-Interpretation. Mohammad helped me with this very much. Here the conclusion:

Target: Customized Template-View for Tiddler

Conclusion (in short)

- Tiddly Wiki adds the own defined Template simply to it's own output.

- Hiding this output via CSS ==> Resulting displaying the customized output.

Solution: https://kookma.github.io/TW-Scripts/#Conditionally%20Display%20The%20Tiddler%20Contents

Selectors for CSS see here:

• https://tiddlywiki.com/prerelease/#Custom%20styles%20by%20data-tags
• https://tiddlywiki.com/prerelease/#Custom%20Styles%20FAQ

Another HTML-Attribute to apply this filter may be the tiddler title stored in data-tiddler-title for filtering in given trees of tags. Here the filtering of the beginning (e.g.

🗝:/ as a name-space for passwords.)

(See Tree-Macro and Table-Of-Content-Macros.)

Thanks to Mohammad and others collecting the information.

Now - not all tiddler in this branch are JSON-Tiddler. So I add to the interpretation these codes:

<$list filter="[all[current]tag[network]]">
<$reveal type="match" state="!!type" text="application/json">
testKey: {{##testKey}}
<$edit-text tiddler=<<currentTiddler>> index="testKey" tag="input" />
</$reveal>

<$reveal type="nomatch" state="!!type" text="application/json">
<$view />
</$reveal>

</$list>

The reveal only interpretes the tiddler only with the given template, if it has type JSON. Otherwise it will display the content as normal TW-Text. You can also add other protections like version-fields and so on, but I think the basic ideas is visible.

[A Gloom]

@Torax Malu

well, if such kind of information is so welcomed,

Of course it is

 

The reveal only interpretes the tiddler only with the given template, if it has type JSON. Otherwise it will display the content as normal TW-Text. You can also add other protections like version-fields and so on, but I think the basic ideas is visible.

Interesting code-- i can use something like that

kinda like conditional field display that selects/shows field content but for created and modified fileds will automatically apply date format

used with table column headers of WikiWitchery Tiddler Explorer for selecting any field to display in the column without having to edit the table code

xxxx nomatch what displays if any field other than created or modified is selected

xxxx match -- what displays if created or modified fields are selected

xxxx nomatch<$reveal type="nomatch" stateTitle="conditional reveal date format" stateField="filter-field5" text="created">
<$reveal type="nomatch" stateTitle="conditional reveal date format" stateField="filter-field5" text="modified">
title -1- <$view field="title"/>
</$reveal>
</$reveal>
<br/>
xxxx matches<$reveal type="match" stateTitle="conditional reveal date format" stateField="filter-field5" text="created">
created -1- <$view field={{!!filter-field5}}/> -2- <$view field={{!!filter-field5}} format="date" template="DD mmm YYYY"/>
</$reveal>
<$reveal type="match" stateTitle="conditional reveal date format" stateField="!!filter-field5" text="modified">
modified -1- <$view field={{!!filter-field5}}/> -2- <$view field={{filter-field5}} format="date" template="DD mmm YYYY"/>
</$reveal>

working example of that attached as well as demos of buttons, reveals and css for selective turining on/off image "layering", table column collapses, border altering, image rotation

also involving in-tiddler css manipulation with interactive controls-- this case css filters manipulation of images (but will work on other html elements)

https://groups.google.com/d/msg/tiddlywiki/QC7Y1Sss2es/jphYhQg9CQAJ