🎉 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, has 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 adjacent.

Fortunately there is a CSS property, 'unicode-bidi', that can be used to 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; }


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