1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00

Compare commits

...

3 commits

Author SHA1 Message Date
Rohan Kumar
0518e83dea
syndicate 2023-11-12 20:44:32 -08:00
Rohan Kumar
aba7cdfe57
Fix syntax error 2023-11-12 20:31:59 -08:00
Rohan Kumar
d99536af22
mention BBCode 2023-11-12 20:29:15 -08:00
2 changed files with 15 additions and 6 deletions

View file

@ -32,13 +32,15 @@ Here's an image marked sensitive on Firefish (a Fediverse server) shows a blurre
=> gemini://seirdy.one/misc/spoiler-fedi.png screenshot: a post by @freeplay@kitsunes.club shows a blurred image under placeholder text reading "NSFW: Click to show". => gemini://seirdy.one/misc/spoiler-fedi.png screenshot: a post by @freeplay@kitsunes.club shows a blurred image under placeholder text reading "NSFW: Click to show".
=> https://pleroma.envs.net/notice/AZNKmYaNv9UOa9e3wO Original thread => https://pleroma.envs.net/notice/AZNKmYaNv9UOa9e3wO Original thread
Some clients support Markdown flavors with the following syntax: More special syntax for spoilers:
``` ```
||optional placeholder text|Fluffychat and Discord hide this.|| ||optional placeholder text|Fluffychat and Discord hide this.||
>!Reddit hides this.< >!Reddit hides this.<
``` ```
=> https://www.bbcode.org/posting-a-spoiler-with-bbcode.php BBCode is the oldest example of dedicated spoiler syntax I know of.
## Comparison with "details" ## Comparison with "details"
On the WICG forum, one user asked about the differences between "spoiler" and "details". The two elements have very much in common; I'd even go so far as to say that "spoiler" elements could also make use of "summary" children for placeholder text. That being said, the semantics and behavior have important differences. On the WICG forum, one user asked about the differences between "spoiler" and "details". The two elements have very much in common; I'd even go so far as to say that "spoiler" elements could also make use of "summary" children for placeholder text. That being said, the semantics and behavior have important differences.

View file

@ -14,6 +14,8 @@ syndicatedCopies:
url: 'http://discourse.wicg.io/t/standardized-spoiler-tag/5814/15?u=seirdy' url: 'http://discourse.wicg.io/t/standardized-spoiler-tag/5814/15?u=seirdy'
- title: 'IndieNews' - title: 'IndieNews'
url: 'https://news.indieweb.org/en' url: 'https://news.indieweb.org/en'
- title: 'jstpst'
url: 'https://www.jstpst.net/f/just_post/9051/proposal-an-html-element-for-spoilers'
--- ---
<section role="doc-introduction"> <section role="doc-introduction">
@ -83,23 +85,26 @@ An image marked sensitive on Firefish (a Fediverse server) shows a blurred place
{{<codefigure>}}{{<codecaption>}} {{<codefigure>}}{{<codecaption>}}
Some clients support Markdown flavors with special syntax for spoilers: More special syntax for spoilers:
{{</codecaption>}} {{</codecaption>}}
```figure ```figure
||optional placeholder text|Fluffychat and Discord hide this.|| ||optional placeholder text|Fluffychat and Discord hide this.||
>!Reddit hides this.< >!Reddit hides this.<
[spoiler=optional placeholder text]BBCode hides this[/spoiler]
``` ```
{{</codefigure>}} {{</codefigure>}}
[BBCode](https://www.bbcode.org/posting-a-spoiler-with-bbcode.php) is the oldest example of dedicated spoiler syntax I know of.
</section> </section>
<section> <section>
## Comparison with `details` ## Comparison with `details`
On the <abbr>WICG</abbr> forum, one user asked about the differences between `spoiler` and `details`. The two elements have very much in common; I'd even go so far as to say that `spoiler` elements could also make use of `summary` children for placeholder text.[^2] That being said, the semantics and behavior have important differences. On the <abbr>WICG</abbr> forum, one user asked about the differences between `spoiler` and `details`. The two elements have very much in common; I'd even go so far as to say that `spoiler` elements could also make use of `summary` children for placeholder text.[^3] That being said, the semantics and behavior have important differences.
### Semantics ### Semantics
@ -148,7 +153,7 @@ Some semantic configurability should be possible with HTML attributes:
: A boolean attribute for `spoiler`. Hidden content could have a preview available or have no preview at all. A "true" value could show a partial preview of a sensitive image (e.g. a version with a reduced resolution and saturation, passed through a heavy blur filter); a "false" value could simply hide the content behind censor bars or filler content. : A boolean attribute for `spoiler`. Hidden content could have a preview available or have no preview at all. A "true" value could show a partial preview of a sensitive image (e.g. a version with a reduced resolution and saturation, passed through a heavy blur filter); a "false" value could simply hide the content behind censor bars or filler content.
`preview-alt` `preview-alt`
: An attribute for any element that supports the `alt` attribute. This can supply alt-text for hidden versions of media without overly descriptive language, analogous to blurred or pixelated previews. "Black-and-white photo of a large wound" could be an image's "preview-alt" text, while the actual alt text could describe the image more..._vividly_.[^3] : An attribute for any element that supports the `alt` attribute. This can supply alt-text for hidden versions of media without overly descriptive language, analogous to blurred or pixelated previews. "Black-and-white photo of a large wound" could be an image's "preview-alt" text, while the actual alt text could describe the image more..._vividly_.[^4]
`loading` `loading`
: `img`, `iframe`, and other elements already support `loading="lazy"` to enable native lazy loading. [A thread on the WICG forums](https://discourse.wicg.io/t/add-loading-lazy-attribute-to-details-element/6060) proposes allowing the attribute on container elements to apply to their children, singling out `details` in particular. As `spoiler` hides content, hidden children may have loading deferred until their parent `spoiler` element activates. : `img`, `iframe`, and other elements already support `loading="lazy"` to enable native lazy loading. [A thread on the WICG forums](https://discourse.wicg.io/t/add-loading-lazy-attribute-to-details-element/6060) proposes allowing the attribute on container elements to apply to their children, singling out `details` in particular. As `spoiler` hides content, hidden children may have loading deferred until their parent `spoiler` element activates.
@ -213,13 +218,15 @@ Thanks to {{<indieweb-person itemprop="mentions" name="Athena Martin" url="https
Thanks to {{<indieweb-person itemprop="mentions" name="~keith" url="https://keithhacks.cyou/">}} for bringing up good points concerning prescriptivity of spoiler norms. Thanks to {{<indieweb-person itemprop="mentions" name="~keith" url="https://keithhacks.cyou/">}} for bringing up good points concerning prescriptivity of spoiler norms.
Thanks to {{<indieweb-person itemprop="mentions" name="Locria Cyber" url="https://www.1a-insec.net/">}} for reminding me about BBCode.
</section> </section>
[^1]: This format is called `org.matrix.custom.html`. The {{<mention-work itemtype="TechArticle">}}<cite itemprop="name headline" class="p-name">Matrix Specification Client-Server API</cite>, section 11.2.2.6: <a class="u-url" itemprop="url" href="https://spec.matrix.org/v1.8/client-server-api/#spoiler-messages">“Spoiler messages”</a>{{</mention-work>}} specifies the spoiler syntax, semantics, and recommended client behavior. [^1]: This format is called `org.matrix.custom.html`. The {{<mention-work itemtype="TechArticle">}}<cite itemprop="name headline" class="p-name">Matrix Specification Client-Server API</cite>, section 11.2.2.6: <a class="u-url" itemprop="url" href="https://spec.matrix.org/v1.8/client-server-api/#spoiler-messages">“Spoiler messages”</a>{{</mention-work>}} specifies the spoiler syntax, semantics, and recommended client behavior.
[^2]: Note that `summary` was originally specified as a block-level button, not an inline element. This may require changes to the definition of `summary`. I don't believe that the changes should significantly impact conformant pages, but non-conforming pages that incorrectly use `summary` elements without the required `details` parent may be impacted. Perhaps we really do need a new element for spoiler summaries. [^3]: Note that `summary` was originally specified as a block-level button, not an inline element. This may require changes to the definition of `summary`. I don't believe that the changes should significantly impact conformant pages, but non-conforming pages that incorrectly use `summary` elements without the required `details` parent may be impacted. Perhaps we really do need a new element for spoiler summaries.
[^3]: I came up with the idea of this attribute when I was browsing some Wikipedia articles on medical topics and ended up on the article for "maggot therapy". I had uBlock Origin configured to make large media click-to-load, and the figure captions told me which ones would be safe to load when others were in the room. However, [figure captions aren't a replacement for alt-text]({{<relref "website-best-practices.md#putting-images-in-context">}}). [^4]: I came up with the idea of this attribute when I was browsing some Wikipedia articles on medical topics and ended up on the article for "maggot therapy". I had uBlock Origin configured to make large media click-to-load, and the figure captions told me which ones would be safe to load when others were in the room. However, [figure captions aren't a replacement for alt-text]({{<relref "website-best-practices.md#putting-images-in-context">}}).