🎉 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^1 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.: parsed text here Though even better would be use of a generic HTML class name indicating the semantic: parsed text here 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 ^1 https://chat.indieweb.org/dev/2025-01-05#t1736092889120900

🎉 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.:

parsed text here

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

parsed text here

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