“Hidden Text Markup” for embedding hidden tags, keys [keywords], and/or Links within entries for helping maintain uncluttered lists

Oftentimes I need to tag, crosslink, annotate, or otherwise create references within entries, that are also search~filterable upon those entries, but that need (do well) to be kept hidden from the primary content/contextual communication within an entry …and I mean hidden in both Normal (non-filtered) AS WELL AS FILTERED Viewing Modes. This serves to reduce clutter while enhancing search+filterability.

• So say I have this list
• Some important blurb message here that is a few lines long, however, no relevant keywords or tags or links were necessary or directly relevant to include in the bodyOfTheEntryText, so now I need to add those. (hidden stuff here: key1 key2 #tagX link1, link2)
• Many such entries as the above exist. (hidden key2 reference #tagY)
• If you do happen to try hiding stuff inside regular [DList](Links), and you can …you get a huge cluttered mess in your search-filter results -they all expand!! So that doesn’t quite work.
• And I am purposefully not using Dlist “Notes” for this because of using those explicitly for several other needs that Notes naturally serve well, and so that’s not a viable solution either.
• another caveat is that, since links expand when editing an entry, editing is a bit messy. It would be great if links only expanded when you cursored into them (or a feature for toggling this behavior)!
• another caveat, you really don’t want these links triggering navigation. luckily its pseudo-tamable, but still not ideal

====
So I was wondering how to sculpt a request for Special “Hidden Text Markup” for embedding hidden tags, keys [keywords], and/or Links within entries for helping maintain uncluttered lists.
I.e., what would a potential best-case “feature-suggestion” look like…

1 - simple markdown addition?
2 - a special markdown link, augmentation to what exists?
3 - other? (had one or two -too messy to consider, etc)

After working on the problem using custom CSS I have concluded that a potentially simple bestcase viable option might resemble #2. And being able to keep the thing from expanding until you cursor into it would be a strong desirable aspect as well.

====
Below I present my interim solution using custom CSS, and its working effectively, albeit with a couple compromises …hurray!
But I think this might could (should?) be a built in feature adding substantial benefit to the DList project …but who knows how many really need/want this(?), or how well aligned it may be with the spirit of the project offering and its development (?).

I am hoping others here may find my (very simplistic) work-around solution useful.* Its still a tad messy, but hey, it works.
I wonder what the Devs think about the potential value of this sort of a feature (cleaned up, of course) for DynaList?

==================================

    1. My Current Interim Solution: Uses custom CSS to
  • hide any data in an entry, wholely or partially,
  • that is placed within explicit DList Link[s]
  • (and classes of links can be created as well),
  • these so-called “hidden link” affects are targetted based on the first 2-3 characters of the [](linkURL).
  • these special links are hidden in normal display view modes and
  • they are also hidden in filtered (post-search) display view modes.
  • They are used to embed Tags, Keywords, Notes, Links, (special search~filters can be placed here as well, but I prefer Notes for this since Notes behave differently, being outside the Ancestor/Parent/Child scope of things).
  • very customizable
  • Helps keep my info display uncluttered,
  • however still a bit messy when editing, and, well, they’re pseudo-tamed links.
  1. Example CSS is shown below, and can be customized to show from zero to as many characters as one may desire in the [linkLabel](). Right now I am using either a bullet or a few characters in the [linkLabel](), with a [](linkURL) “indentifier” requirement of a “space” followed by an “underscore” (" _")…

  2. Example Entries based on [linkLabel](linkURL)
    [customLable]( _anything here gets hidden)
    [•]( _tags, keys, notes, links)
    [tftl]( _tags, keys, notes, links)
    [Alt-0160]( _ hidden tags, keys, links here) …utilizes a " null identifier" =hides the link entirely.

Looks like

  • Entry blah blah, following bullet has hidden stuff •
  • Entry blah blah, another buried nugget tftl
  • Entry using a null identifier at the end=
    …whee the bullet and the ‘tftl’ are underlined links.
  1. In my case I include separator lines above and below tag/key entries inside the linkURLs in order to present more separation between entries while editing (looks pretty ugly while editing, -would be great if they didn’t expand until you actually cursor into them!).

  2. Sample CSS
    /* hide tags, keys, text, notes inside native DList links */
    a[href^=“http:// _”]{ /* First chars of link must be space + underscore for style */
    color:darkgreen;
    display:inline-block;
    max-width: 33px; /*about 4 chars -adjust for linkLabel*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* if you like */
    line-height:10pt;
    font-size:0.8em; /*reduced size */
    text-indent: -1px; /* help hide the opening label-bracket */
    }
    /* kind of thing. create various versions to create classes if you like */

  3. Some related DynaList Posts References
    * https://talk.dynalist.io/search?q=hidden%20text
    * Search results for ‘hidden text’ - Dynalist Forum
    * Hide tags in the title
    * Hide tags in the title - Features - Dynalist Forum
    * Hidden Tags
    * Hidden Tags - Features - Dynalist Forum
    * Invisible tags?
    * Invisible tags? - Features - Dynalist Forum
    * Possibility to hide some items
    * Possibility to hide some items - :star2:Features - Dynalist Forum

Thanks for your consideration.
HTHawks

2 Likes

Wysiwyg editing is comming. Probably next release. It will possibly fix some of the issues you are experiencing.

Using custom CSS to modify tags and links is a very cool idea. That have been thinking about implementing for a while, since my lists look crazy sometimes. And I get some weird looks when others see me taking notes :crazy_face: :shushing_face: Although your solution is a bit more complex than what I need.

Thanks for lookin in, Kenneth_Aar.
It was a little tedious at first figuring and tweaking. Once I had an implementation with a couple large lists, and doing a filter~search, it gave me a little …wow~cool!.. factor.

While I don’t know the development platform specifically being employed for DynaList, I suspect something like this would be pretty simple to add, say, and alternate bracket markdown applique or something.

Anyway, I’m really enjoying this project, and btw, I really apreciate some of the inspired organizational posts you’ve been sharing. thanks for being so helpful and supportive.
HTH

1 Like

Thanks. Always nice to be appreciated.

I can’t get it to work. I tried your example CSS and have written this in a node:

[BBC.com]( _https://www.bbc.com)

But it shows up as:

BBC.com

Hmmmm… I did come back here prior to you posting and updated my post because I realized that the CSS comments were hiding some of the necessary * characters. Perhaps this broke your css (as that’s exactly what it would do if one copy-pasted it as it was!).

I just double checked the code, including copy and pasting from the post here, and it looks correct and correctly formatted now (no missing characters).

Another thing to keep in mind, which you likely already know, is that CSS application of code is “cascading”, so placement of the code within your existing CSS is going to have an affect.

I hope this helps -please let me know.
HTHawks

Update: I posted your link into my testbed and it displays as
BBC… underlined.
Of course, clicking it doesn’t work because the link is re-structured as “broken” ON PURPOSE BECAUSE this is intended to be only a placeholder zone for hiding things.
;^) I hope that makes sense.

Update2: and I did conduct a virgin test using only the posted code, just fyi.

To be clear, after the CSS is applied, the html code for the entry in the rendered web page will (should) look like this:

<a target="_blank" href="http:// _https://www.bbc.com" tabindex="-1" class="node-link">BBC.com</a>

I see the problem, I am working on it.

I’m so sorry, stupid mistake… copy/paste ended up with special character quotes because I worked on it outside my plain-text (and/or code) editors at some point (rooky mistake, and I’m not one -so bad on me!)

I have updated the code, both here and in the CSS post I shared it in as well.

Thanks for spotting and reporting that, Kenneth)Aar !
Let me know what you think later ;^)

Will try it out.

1 Like