Is there a way to have macros both on separate lines in edit mode and on consecutive lines in view mode?

#1

What I want: In edit mode,

<<subsume "x">>
<<subsume "y">>
<<subsume "z">>

and not

<<subsume "x">><<subsume "y">><<subsume "z">>

In view mode:

x
y
z

Not

x

y

z

The subsume macro is:

\define subsume(tid:"") <details><summary><$view tiddler="$tid$" field="title"/><$link to="$tid$">&nbsp;&nbsp;*&nbsp;</$link></summary><span class="indent1"><$transclude tiddler="$tid$" field="text" mode="block"/></span></details>

I just want to avoid messy text fields in edit mode. I will have a LOT of these soon, so it makes it easier to edit if they are all on separate lines, but it looks better to have them on consecutive lines in view mode. Thanks for any help you can give.

#2

Ooh! I just figured out a workaround:

  1. Have a stylesheet with a CSS rule
html body.tc-body .tight {display: inline-block;}
  1. Wrapped the content of the macro with a CSS class (“tight”)
\define subsume(tid:"") <span class="tight"><details><summary>etc etc etc </span>
  1. Wrap the macro calls in triple quotes
"""
<<subsume "x">>
<<subsume "y">>
<<subsume "z">>
"""
#3

1. A quick and dirty fix

It’s a little hacky, but putting something directly before the first macrocall will prevent the block mode parsing. That’s the primary issue, as far as I can tell: when they’re parsed in block mode, each gets wrapped in <p>...</p>, which creates the space you see.

For space-fixer elements like this, I like to use @@.e @@, which is the wikitext shortcut for <span class="e"></span>. .e stands for “empty”, and it’s never defined in my stylesheets; it’s there purely to remind me what’s going on.

@@.e @@
<<subsume "x">>
<<subsume "y">>
<<subsume "z">>

2. A CSS fix

Alternatively, you can use a single CSS rule added either to a stylesheet tiddler or to the macro itself:

p:has(details.subsume) { display: contents; }

display: contents is a CSS trick that effectively removes an element from the rendered HTML while preserving its children. So in this case, we want to remove any <p> that contains one of your subsumes.

  • I added the class subsume to both the CSS rule and the version of your macro I used for testing, but you could simplify it to p:has(details) if you want to eliminate all <p> tags wrapping <details> elements.

Here’s my slightly edited version of your macro (which I sneakily switched to a procedure). It should work with either approach, or with your approach above. You can, of course, omit the details class if you don’t need it.

\procedure subsume(tid:"")
<style>
	p:has(details.subsume) { display: contents; }
</style>
<$tiddler tiddler=<<tid>> >
<details class="subsume">
	<summary><$view field="title"/><$link>&nbsp;&nbsp;*&nbsp;</$link></summary>
	<span class="indent1"><$transclude mode="block"/></span>
</details>
</$tiddler>
\end

What I changed:

  • procedure-ification:
    • \define → \procedure
    • "tid" (or the variable equivalent <<__tid__>>) → <<tid>>
  • line breaks and tabs for legibility — obviously not necessary!
  • inline <style>...</style> definition — only if you want it self-contained; moving the CSS to a stylesheet is technically better practice.
  • <$tiddler tiddler=<<tid>> >...</$tiddler> — wrapping the whole thing in a $tiddler widget redefines the <<currentTiddler>> variable in this context. Most TW widgets default to tiddler=<<currentTiddler>> or $tiddler=<<currentTiddler>> if these attributes aren’t otherwise specified, so changing the value of the <<currentTiddler>> lets us omit tiddler=... from $view and $tranclude and to=... from $link.
  • removed field="text" from the $transclude widget because it transcludes the text field by default.

Other than the variable changes needed for the macro —> procedure conversion, each of those bullet points is a stand-alone change, so you should be able to adopt any or none of it, as you like. :slightly_smiling_face:

3 Likes