Styling individual words in titles

,
#1

It doesn’t seem possible to style individual words in tiddler titles. None of the following methods work:

title with some words in @@.small-caps small caps@@
title with some words in <span class="small-caps">small caps</span>
title with some words in @@font-variant:small-caps;small caps@@

There is a good reason for not allowing this, I guess (not found yet).

I use Tiddlywiki for taking notes on books, among other things. Often the titles of the notes are text taken verbatim from the books, and for quick and easy recognition my preference is to use the text formatting as well.

1 Like
$:/tags/ViewTemplateTitleFilter, additional tags and list-before
#2

Hi Jan,
I think it has never been requested. At least I do not remember.

#3

I’m unsure if this is possible with CSS on its own, but it is possible with the Dynannotate plugin. It allows individual highlighting and styling of words for text captured inside the widget. You could wrap the widget around the contents of $:/core/ui/ViewTemplate/title like so:

\whitespace trim
\define title-styles()
fill:$(foregroundColor)$;
\end
<$dynannotate search="some words" searchDisplay="overlay" searchMode="some" searchClass="small-caps">
...
</$dynannotate>

It’s a rather hacky solution (maybe others could find a better way of doing it), but I tested it on my own with the search “New” and it works.

#4

I would caution against using the title that way. It’s the unique identifier for a tiddler, and mixing in markup to it seems a recipe for disaster.

However, you can choose to display the caption field in place of the title. And with a little care, you could format that, by using a ViewTemplateTitleFilter:

title: $:/_/my/config/ViewTemplateTitleFilters/caption
tags: $:/tags/ViewTemplateTitleFilter
list-before: $:/config/ViewTemplateTitleFilters/default

[<currentTiddler>has[caption]then[$:/_/my/core/ui/ViewTemplate/title/caption]]

title: $:/_/my/core/ui/ViewTemplate/title/caption

\whitespace trim
<h2 class="tc-title">
<$wikify output="html" mode="inline" name="formatted" text={{!!caption}}><<formatted>></$wikify>
</h2>

Now your (inline) formatting of the caption should show up where you expect the title.

title: New Tiddler
caption: New @@color:red;Tiddler@@ with highlighting

image
image1187×312 17.3 KB

However, so note this will show the caption in place of the title for all tiddlers that have a caption. This is usually my default anyway, so it doesn’t worry me. But it might not work for you.

The attached should demonstrate the idea.

FormatTitle.json (880 Bytes)

3 Likes
#5

You can customize your TW so that tiddlers can display formatted caption field as an alternative to their actual title text (which is used as a unique identifier for each individual tiddler and therefore must not contain any wikitext formatting).

Give this a try:

First, create a new tiddler named something like $:/config/ViewTemplateTitleFilters/caption with a tag of
$:/tags/ViewTemplateTitleFilter and text content of

[has[caption]then[$:/custom/ui/ViewTemplate/title/caption]]

You will also need to add a field named list-before that has an empty value.

What the above tiddler does is tell the TWCore that “tiddlers containing a caption field should use the $:/custom/ui/ViewTemplate/title/caption to display that tiddler’s caption field in place of the default title field”. If no caption field exists, the TWCore cascade will “fall through” to process the remaining items in the cascade to display the tiddler’s title field as usual.

Next, create another new tiddler named $:/custom/ui/ViewTemplate/title/caption (i.e., the same name that you used in the cascade filter syntax above). This tiddler defines how to render the alternative caption field and should contain text like this:

<$transclude field="caption"/>

That’s all there is to it. Now, whenever you want to show a tiddler “title” that includes wikitext formatting, you can just add a caption field to that tiddler. For example, create a tiddler where

  • title=title with some words in small caps, and
  • caption=title with some words in @@.small-caps small caps@@

Let me know how it goes…

enjoy,
-e

4 Likes
#6

Both Scott’s and Eric’s (almost identical) solutions work.
One small improvement in the user face, one giant leap for me.
Thank you both!
Thank you all for your swift responses!

1 Like
#7

D’oh. Not sure why I went the roundabout way with <$wikify>, but this is clearly better.

#8

Additional question:
Is there also a way to style a text within brackets - only if there?

eg title:
grafik

Thanks, Stefan

#9

Using the same “cascade” technique I described, you could define $:/custom/ui/ViewTemplate/title/caption like this:

<$view field="title"/>
<$list filter="[<currentTiddler>has[caption]]">
   (@@color:green; <$transclude field="caption"/>@@)
</$list>

This will display the normal tiddler title, and then tests to see if the tiddler has a non-blank caption field. If it does, then it displays the caption field value within parentheses (aka, “brackets”), and automatically applies the “color:green” style to that content so you don’t need to have that styling in the caption content itself.

-e

1 Like
#10

I see, thanks @EricShulman .
So the only way is using the caption field… am I right?
(This is not my prefered way)

Regards, Stefan

#11

You could use any field you want (e.g., inspired-by), like this:

  • Create $:/config/ViewTemplateTitleFilters/mytitle with a tag of $:/tags/ViewTemplateTitleFilter, containing:
[has[inspired-by]then[$:/custom/ui/ViewTemplate/title/mytitle]]
  • and $:/custom/ui/ViewTemplate/title/mytitle containing:
<$view field="title"/> (@@color:green; <$transclude field="inspired-by"/>@@)

-e

#12

Sorry, I’m not clear…

The question is, if it is possible to style words within brackets of a title - no use of a field…
→ Search title for “(”
→ if there, than style is (eg. green) until “)”

Thanks
Stefan

#13

Yes, it CAN be done… with a little bit of “regular expression” magic…

Edit the TWCore shadow tiddler $:/core/ui/ViewTemplate/title/default, and replace this line:

<$view field="title"/>

with these lines:

<$let find="\((.*)\)" replace="(<span style='color:green;'>$1</span>)"
   title={{{ [{!!title}search-replace::regexp<find>,<replace>] }}}>
<<title>>
</$let>

Notes:

  • find is a regular expression pattern that matches “(your text here)”, where \( and \) are literal open and close parens, and the ( and ) surrounding the .* pattern indicates a “capture group” containing the text (which can be 0 or more characters).
  • replace is the output to substitute in place of the matched pattern, where $1 indicates where to insert the contents of the capture group found by the find pattern.
  • These two pieces of regular expression magic are then used by a filtered transclusion with a search-replace[...],[...] filter operator that takes the tiddler’s stored title and wraps the captured text inside an HTML <span> to apply the desired CSS styles.
  • The result is then rendered by displaying the <<title>> variable, which automatically parses the resulting HTML syntax so the title text is shown with the CSS styles applied.

enjoy,
-e

#14

I just did much the same thing. Rather than throw it away, here’s my version:

FormatTitleNotes.json (1.1 KB)

The only significant differences:

  • I did the find and replace fields inline:

    [{!!title}search-replace:g:regexp[\((.+)\)],[(@@.note $1@@)]]

  • I used a css class rather than an inline style, and then formatted in a CSS tiddler

  • I made this an additional ViewTemplateTitleFilter rather than overwriting the default one.

1 Like
#15

Thats it - very nice!

Thanks @EricShulman and @Scott_Sauyet!

Greetings, Stefan

#16

As mentioned the solution works great.
The titles are also shown with markup when displayed in a table of contents (with the toc-selective-expandable macro). That is not case though when they are obtained by filtering, e.g. [tag[note]] (the filter I use in my Search notes tiddler is more complex, but the complexity would only distract here). The titles, the title fields I presume, are then shown as text without markup. Adding get[caption] ([tag[note]get[caption]]) shows the captions verbatim, i.e., also without markup, e.g. p. 25, <span class="title">@@.small-caps Small caps@@ 2) //Italics//</span>. It would be useful if there is a way to show them with markup in this case as well.

$:/tags/ViewTemplateTitleFilter, additional tags and list-before
#18

The above solution also makes it possible to use math in titles (with the KaTeX plugin).
Very nice.
E.g.:

math in the title
math in the title1594×248 22.1 KB

1 Like
#19

Excellent! But Laplace?! Noooooooooooo

Five pages of calculation to turn a nice little equation with ‘s’ in it to a nice little equation with ‘t’ in it…

#20

8^)
Just an example …