Eight years ago today, the #IndieWeb Webmention protocol was published as a W3C REC https://www.w3.org/TR/webmention/

As a social web building block, #Webmention was designed to work with various other building blocks. Small pieces, loosely joined. Every year developers find new ways to work with Webmention, and new subtleties when combined with other building blocks.

The primary uses of Webmention, peer-to-peer comments, likes, and other responses across web sites, have long presented an interesting challenge with the incorporation and display of external content originally from one site (the Webmention sender), on another site (the Webmention receiver).

There are multiple considerations to keep in mind when displaying such external content.

Two examples of external content are images (e.g. people’s icons or profile images from the author of a comment) and text (e.g. people’s names or the text of their comments).

For external images, rather than displaying them in full fidelity, you may want to compress them into a smaller resolution for how your site displays the profile images of comment authors.

If you accept Webmentions from arbitrary sources, there’s no telling what might show up in author images. You may want to pixelate images from unknown or novel sources into say 3x3 pixel grids of color (or grayscale) averages to make them uniquely identifiable while blurring any undesirable graphics beyond recognition.

For external text, one thing we discovered in recent IndieWeb chat¹ is that someone’s comment (or in this case their name) can contain Unicode directional formatting characters, e.g. for displaying an Arabic or Hebrew name right-to-left. Text with such formatting characters can errantly impact the direction of adjacent text.

Fortunately there is a CSS property, 'unicode-bidi', that can be used to directionally isolate such external text. Thus when you embed text that was parsed from a received Webmention, possibly with formatting characters, you have to wrap it in an HTML element (a span will do if you have not already wrapped it) with that CSS property. E.g.:

<span style="unicode-bidi: isolate;">parsed text here</span>

Though even better would be use of a generic HTML class name indicating the semantic:

<span class="external-text">parsed text here</span>

and then a CSS rule in your style sheet to add that property (and any others you want for external text)

.external-text { unicode-bidi: isolate; }

Previously: https://tantek.com/2023/012/t1/six-years-webmention-w3c


This is post 7 of #100PostsOfIndieWeb. #100Posts #socialWeb #openSocialWeb

← https://tantek.com/2025/004/t1/micro-one-onramp-open-social-web
→


Glossary

HTML class name
  https://tantek.com/2012/353/b1/why-html-classes-css-class-selectors
IndieWeb chat
  https://indieweb.org/discuss
pixelate
  https://indieweb.org/pixelated
small pieces, loosely joined
  https://www.smallpieces.com/
Unicode directional formatting characters
  https://en.wikipedia.org/wiki/Bidirectional_text#Explicit_formatting
unicode-bidi CSS property
  https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi  


References

¹ https://chat.indieweb.org/dev/2025-01-05#t1736092889120900

The team @micro.blog have done it again.

They soft-launched https://micro.one yesterday¹.

This may be the most accessible onramp to the open social web ever.

Cost: $1 a month. Yes you read correctly.

This is the simplest and cheapest (where you are the customer, not the product) way to own your identity and content online².

Stop posting in someone else’s garage³.

Time to export your Twitter, and migrate your Mastodon handle to your own home on the web.

Of course you can bring your own domain name. Additionally:
* blog posts, naturally, both articles and microblogging notes
* photos
* podcasting
* custom themes
* web-clients and native mobile posting clients
* WordPress, Tumblr, Mastodon, Medium import
More details (and alternatives) at https://micro.one/about/pricing

And yes, it interoperates with the open #socialWeb, including:
* #ActivityPub support, #Mastodon and #fediverse compatibility
* #IndieAuth to sign-in to third-party apps
* #microformats support in all built-in themes
* #Webmention for sending and receiving replies across websites
* #Micropub standard posting API, supporting dozens of clients
* #Microsub standard timeline API, supporting social readers
More #indieweb support details at https://micro.one/about/indieweb

Did I mention the the superb micro.blog (and micro.one) Community Guidelines?
* https://help.micro.blog/t/community-guidelines/39

Well done @manton.org and team.

This is post 6 of #100PostsOfIndieWeb. #100Posts #ownYourIdentity #ownYourData #openSocialWeb

← https://tantek.com/2025/003/t1/lastfm-year-in-review-playback24
→ https://tantek.com/2025/012/t1/eight-years-webmention


Glossary

IndieAuth
  https://indieweb.org/IndieAuth
microformats
  https://microformats.org/wiki/microformats
Micropub
  https://indieweb.org/Micropub
Microsub
  https://indieweb.org/Microsub
Webmention
  https://indieweb.org/Webmention

References

¹ https://www.manton.org/2025/01/03/microone-was-effectively-a-softlaunch.html
² https://tantek.com/2025/001/t1/15-years-notes-my-site-first
³ https://tantek.com/2023/022/t2/own-your-notes-domain-migration