Static html problem with details elements

#1

Hi everyone,

Back in October 2021 I asked here for guidance regarding CSS for static htmls. No one ever answered.

I am running into the same problem I have had for years: most details elements work fine when exporting to static htmls. But some don’t.

Here is an example of a static with problems: static

The second details element in the top tiddler shows the word ‘details’ instead of the text in the summary. Open the slider, and ‘Juan’, the text in the summary, is off to the left with a bullet in front of it. And the word ‘details’ is still there.

The same happens in the last details element of the second section, “Los temas y la teología en Juan”.

I have uploaded the TiddlyWiki file they were exported from, tw file.

Since both of the offending details sliders are using my viewme macro, here is the link to the macro. Actually two are tagged $:/tags/Macro. But I had the same problem when I only had one tagged $:/tags/Macro, so it is not a matter of them conflicting.

$:/.giffmex/Macros/viewmeclosed
$:/.giffmex/Macros/viewmeclosednoedit

If anyone can help me with this, I would appreciate it. I realize this is not a CSS forum, but this is specifically related to the difference between the look and functioning of static HTMLs generated by TW and the regular TW files they are generated from.

I solved quite a number of CSS issues today on my own. But this is the last problem, and it is befuddling me. I am wanting for this to eventually be a file of hundreds of pages worth of free content, but I want to get this perennial problem solved before I commit to it.

Thanks in advance for any wisdom!

1 Like
#2

It looks the created anchor element (a) breaks the details. I think the anchor are created form $:/core/templates/static-tiddler, you can try to edit the text of this tiddler to <$transclude tiddler="$:/core/ui/ViewTemplate"/> and export your tiddlers again.

1 Like
#3

Yes! Years of frustration gone in one minute. And I would have never found that in a million years. Thank you, @Alvaro !

#4

Oh dear, but that creates another problem: I can’t navigate from a link to another tiddler in the story because the anchor has been removed.

Would there be a way to add the anchor without messing up the details elements?

#5

I’m not following how this is all generated, but there is a simple switch in the generated HTML that fixes this. Perhaps you can see the differences in the generation that lead to it.

This is your generated code where it’s broken:

<details>
  <a name="Una introducción al Nuevo Testamento">
    <summary>
	  <span class="wine">Juan</span>
	</summary>
	<span class="singlelist"></span>
  </a>
  <ul>
    <!-- ... nothing to see here.  move on folks -->
  </ul>
</details>

And if it were like this, it seems to be fine:

<details>
  <summary>
    <a name="Una introducción al Nuevo Testamento">
      <span class="wine">Juan</span>
    </a>
  </summary>
  <span class="singlelist"></span>
  <ul>
    <!-- ... nothing to see here.  move on folks -->
  </ul>
</details>

The difference: In the first, you wrap the <summary> in an <a> link. In the second, the <a> link is just inside the <summary>. If you can fix the generation to match the second version, I think you’re all set.

#6

Hi @Scott_Sauyet , hmmm, well, thanks for finding the problem. But I am not sure what the solution is. I might be able to put an <a> inside the summary, and maybe that will be enough though I doubt it.

I don’t know how to remove the <a> from outside the summary. That wouldn’t have been my doing.

#7

Waiting for a bus now and can’t check. I’ll try to look this evening. When I did check before I only found one of the two macro tiddlers you mentioned and didn’t go digging any further.

#8

[edit] I tried changing my macro around, then remembered that the first of the offending details elements does not use my macro…it is a regular details element.

So I left $:/core/templates/static-tiddler as it is in an empty TW file, reverted my macro tiddlers to normal, and changed all the regular details elements from my table of contents into viewme macros.

That did the trick. The links go to the tiddlers, and the sliders all work properly.

So even though I still don’t know how to export statics with normal details elements that won’t have any problems, I do have a workaround…my own macro.

Thanks to @Alvaro and @Scott_Sauyet for your help!

#10

I went into your TiddlyWiki instance and deleted the two following tiddlers:

$:/core/ui/ViewTemplate/subtitle
$:/core/ui/ViewTemplate/tags

Subsequent export of Una introducción al Nuevo Testament, the details elements look A-1.

#11

Why that would matter makes no sense to me.

Those two shadow tiddlers that are overriding the default ones, I see no differences between them and the ones they override.

EDIT: SCRATCH THAT! Those two tiddlers are different from the ones they override. They are excluding the tags on the default tiddlers. The default tiddlers have the tag “$:/tags/ViewTemplate”, and that tag is not there in the overriding tiddlers.

#12

Correct, I removed that tag because I didn’t want the subtitle and tags areas visible on publishing.

#13

Totally legit to want them excluded from static export.

However, including them fixes the problem with the details element. So those two tiddlers bring something into the equation that fixes the details, something that is missing when you exclude them.

That is of use for those who know the core. To me, it sniffs of something, an html tag or whatever, or a pragma, that is in the wrong core tiddler.

#14

One thing that you need to do when using details elements (an most others) is to leave a blank line between the details and summary tags and your content/wiki text so TiddlyWiki can parse it as a block mode rather than inline mode.

  • Yo can also set class and style on the details element.