Beefy Boxes and Bandwidth Generously Provided by pair Networks
Your skill will accomplish
what the force of many cannot
 
PerlMonks  

Adding details with summary html tags

by Lady_Aleena (Curate)
on May 22, 2020 at 18:23 UTC ( #11117126=monkdiscuss: print w/replies, xml ) Need Help??

I was wondering if <details> with <summary> could be added as acceptable html here in PerlMonks. Those tags could be used when code or data examples are more than 10 or so lines. <readmore> is great for keeping long batches of code or data from the main list of posts, however, long batches of code might do well if kept in a <details> tag where the code or data can be hidden to keep page lengths from being over long upon initial load. So what do you all think?

<details> <summary> A very long code example </summary> <code> ... The very long example code line 1 ... ... The very long example code line 2 ... ... The very long example code line 3 ... ... The very long example code line 4 ... ... The very long example code line 5 ... ... The very long example code line 6 ... ... The very long example code line 7 ... ... The very long example code line 8 ... ... The very long example code line 9 ... ... The very long example code line 10 ... ... The very long example code line 11 ... ... The very long example code line 12 ... ... The very long example code line 13 ... ... The very long example code line 14 ... ... The very long example code line 15 ... </code> </details>

My OS is Debian 10 (Buster); my perl version is 5.28.1.

No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
Lady Aleena

Replies are listed 'Best First'.
Re: Adding details with summary html tags (spoiler tag)
by LanX (Cardinal) on May 22, 2020 at 23:57 UTC

      I forgot that PerlMonks, for unknown reason, has spoiler tags. Does it work like the combination details/summary tags? Also, I must have suppressed them somewhere, nothing happened on my end when you used them. Was there a nifty arrow to click to open and close the spoiler?

      My OS is Debian 10 (Buster); my perl version is 5.28.1.

      No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
      Lady Aleena

        On Display Settings you can diddle how they, erm, display. E.g. I have it set to "link" and I get a link which when clicks on unhides them for that node (with another link to unhide for all in the thread).

        The cake is a lie.
        The cake is a lie.
        The cake is a lie.

        > I must have suppressed them somewhere,

        It's on by default. If you are not signed in - like by changing the top-domain of the URL to .net or .com - you'll see it.

        > Does it work like the combination details/summary tags?

        Well, you tell me.

        Cheers Rolf
        (addicted to the Perl Programming Language :)
        Wikisyntax for the Monastery

        )

Re: Adding details with summary html tags
by Fletch (Chancellor) on May 22, 2020 at 23:12 UTC

    One nitpick against that comes readily to mind: we've already had people griping fairly recently that they can't just use markdown (or the like) to format posts and that the (relatively limited) PM HTML dialect required now is "just too hard" for noobs. I'm not thinking that they're going to be willing (to say nothing of able . . . *cough*) to correctly use even more specific use case HTML5-new-shinyness.

    That aside though I'd probably agree in principle that were changes to the markup to be added this would be a reasonable bit of HTML5 to allow.

    The cake is a lie.
    The cake is a lie.
    The cake is a lie.

Re: Adding details with summary html tags
by kcott (Bishop) on May 23, 2020 at 11:00 UTC

    G'day Lady Aleena,

    Given you indicated in "Re^2: Adding details with summary html tags" that you were generally unfamiliar with <spoiler> — forgot it existed; didn't know its purpose; didn't know how it worked — I suggest reading "Perl Monks Approved HTML tags".

    Having seen quite a few of your previous posts, you seem reasonably familiar with HTML5, so the differences (elements, attributes, functionality) should hopefully be fairly obvious to you. I think that any proposal of this nature should also address such differences; for instance, what subset of the attributes used in HTML5 would you like implemented (I don't think all of them would be appropriate).

    What you're proposing is, as ++LanX indicated, already handled for the most part by <spoiler>. Because of this, I don't support your proposal to introduce two new elements. Having said that, I would support (at least in principle) a proposal to add a mechanism to <spoiler> that allowed it to be hidden after it had been revealed: basically, some sort of Show/Hide toggle switch.

    — Ken

      IMHO the best solution for overly long code sections would be an "automatic/DWIM" shrink to 10-15 lines on display of <code></code> using CSS and/or JS.

      Any toggle would be simple to implement then.

      This could even be configured by display settings and wouldn't require learning any new tags.

      I think I've seen this before elsewhere.

      This is just a suggestion, I can't volunteer implementing it right now.

      Cheers Rolf
      (addicted to the Perl Programming Language :)
      Wikisyntax for the Monastery

        Firstly, I have no problems with what you've written.

        I did just want to clarify that I wasn't advocating the introduction of a Show/Hide mechanism; rather, that I would "support (at least in principle)" a proposal to do so. To be honest, I only very rarely want to hide <spoiler> content after I've revealed it — the last time was probably more than a year ago — so, for me personally, the absence of a Show/Hide mechanism is of little concern.

        — Ken

      I went and refamiliarized myself with the <spoiler> tag. It does hide the text within it, however, the difference between <spoiler> and <details> is that <details> does not require the page to be reloaded. As the world moves to more mobile devices and plans that might have data limits, reloading pages is not optimal. Also, long blocks of code are not semantically spoilers. While my site is not the best when it comes to being easy for those using assistive technologies, I do try. So, this is not only a way to keep page loads down to a minimum, it is also more correct to use the proper HTML tag. I created a sample of <details> with <summary> so you can see how they work.

      As for other HTML5 elements, I don't see any use for them here either. If we ever get <img>, then <figure> and <figcaption> might be nice. They could also be used around blockquotes, like the one I used below.

      It might be a good idea to drop <font> as one day browsers might drop it.

      This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

      - from MDN <font>

      So to wrap up, <details> along with <summary> would hide large blocks of code nicely, is more semantically correct, and does not reload the page to see the large blocks of code as <spoiler> does.

      My OS is Debian 10 (Buster); my perl version is 5.28.1.

      No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
      Lady Aleena

        You wrote:

        "Also, long blocks of code are not semantically spoilers."

        That is an additional use for them. In "Writeup Formatting Tips", you'll see:

        "If you want to obscure some text for some reason (like the punchline for a joke, or the answer to a tricky question) then you should use <spoiler> tags."

        Furthermore, given you've brought up semantics, the word "details" is hardly semantically correct for an element which, by default, does not show details.

        You wrote:

        "... it is also more correct to use the proper HTML tag."

        No, that's just wrong. In "Markup in the Monastery", you'll see:

        "PM markup code is NOT entirely w3c html 4.01 standard nor is it XHTML, so even if you're expert please scan these notes."

        Reading the notes that follow will show it's NOT any other HTML version either. There's also more information about spoilers.

        You wrote:

        "It might be a good idea to drop <font> as one day browsers might drop it."

        In "Writeup Formatting Tips", you'll find:

        "Almost any use of <font> tags will be wrong for at least some users, so you shouldn't use them. At all. The only reason <font> is allowed is for backwards compatibility."

        [As I've included quotes from multiple sources, I've added 'You wrote:' in multiple places to separate the parts of your reply to which I was responding. In the initial preview without those, I thought there might be some confusion. Except as an aid to sectioning, the emboldening is not significant.]

        — Ken

        My concern is usability and return of investment.

        Why are you expecting users to learn two new intertwined markups while you yourself were already ignoring the spoiler tag?

        I'm afraid in the end this will cost more time to implement than time invested applying it.

        As I said i'm in favour of adding an automatic JS toggle to long code sections and shortening them by default if they exceed a certain limit.

        No one will need to learn new markup and everybody could adjust it to his taste in the display settings.

        Same with overly wide code, btw.

        Edit: Alone the spared considerations to edit those posts will help justify the investment.

        Cheers Rolf
        (addicted to the Perl Programming Language :)
        Wikisyntax for the Monastery

        "As the world moves to more mobile devices and plans that might have data limits, reloading pages is not optimal"

        Nor is loading all of the content when the reader may not be interested. Requiring an additional click for the curious to find out, rather than loading it all anyway seems preferable to me.

Re: Adding details with summary html tags
by Anonymous Monk on May 22, 2020 at 22:55 UTC

    I was wondering if <details> with <summary> could be added as acceptable html here in PerlMonks. Those tags could be used when code or data examples are more than 10 or so lines. <readmore> is great for keeping long batches of code or data from the main list of posts, however, long batches of code might do well if kept in a <details> tag where the code or data can be hidden to keep page lengths from being over long upon initial load. So what do you all think?

    I think, if you can't handle the existing "tags" why would "more tags" be of benefit?

    Also, I think it's fairly pointless to add more tags when existing tags could be merely styled

      It would take a lot of styling to get existing html tags to do what <details> and <summary> do. Also those styles would apply only to what I see, not what everyone else sees. If I remember correctly, the style attribute, and maybe even the class attribute, has been disabled. So, how would you suggest that I get the <div> or <p> tags to act like <details> and <summary> for everyone who reads what I post? Also, <details> and <summary> are semantic whereas styled <div> or <p> tags are not.

      So, sure, I could add styles to my personal css here on PerlMonks, but would those styles be copied to everyone elses' css too? Would you add those styles to your css? Would the styles even work?

      I do not see how this would create a problem.

      My OS is Debian 10 (Buster); my perl version is 5.28.1.

      No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
      Lady Aleena
      Please don't use code tags for quoting.

      update

      Especially extremely long lines.

      Cheers Rolf
      (addicted to the Perl Programming Language :)
      Wikisyntax for the Monastery

      A reply falls below the community's threshold of quality. You may see it by logging in.

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://11117126]
Front-paged by Corion
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others exploiting the Monastery: (6)
As of 2020-12-03 22:29 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    How often do you use taint mode?





    Results (58 votes). Check out past polls.

    Notices?