Drawing with zero-width characters

(zw.swerdlow.dev)

60 points | by benswerd 6 hours ago

10 comments

  • krackers 2 hours ago
    Seems like a more advanced version of zalgotext (which also uses combining marks)
    • benswerd 2 hours ago
      This is beautiful and I did not know it existed until now tx
  • ilaksh 25 minutes ago
    Another thing in the category of abusing font capabilities is Harfbuzz (OpenType engine) WASM, which if compiled into an application allows fonts to basically run any code. A few examples are an LLM or a Tetris font. Apparently this WASM support is in the font rendering for Chrome and Firefox supposedly.

    I was really tempted to try to use it to make a Harfbuzz OS.

    https://fuglede.github.io/llama.ttf/

  • bawolff 2 hours ago
    I can't tell if the results are just very bad or my browser is just not rendering properly. I feel like its probably the later but it would be cool to have a reference picture to be sure.
    • benswerd 2 hours ago
      which browser are you using?
      • gabcoh 2 hours ago
        I’m also not seeing the purported images on iOS 26.1 safari
        • benswerd 1 hour ago
          It does not work on iOS Safari at all, it should show a warning at the top saying so
          • doodpants 21 minutes ago
            I do not miss the days of "This site best viewed with browser X".
        • frizlab 1 hour ago
          It apparently only works correctly on chromium-based browsers.
          • ilaksh 35 minutes ago
            I am on Chrome on Android and it does not work. Although some of them it's like halfway there.
          • kibwen 1 hour ago
            Appears to mostly work in Firefox, including in the browser tab title, which is funny.
  • senfiaj 1 hour ago
    When I visit such pages, my impression is that someone want to break my browser.
    • benswerd 1 hour ago
      thats the vibe i was going for
  • chrisfrantz 3 hours ago
    Love that this exists now, thank you and nice read.

    FWIW, didn't have any luck with the generator at the bottom, could be user error.

  • benswerd 6 hours ago
    Figured this out a couple weeks ago, hoping it can lead to some cool new art.
    • mkl 2 hours ago
      Images of what it's supposed to look like would really help, as I'm pretty sure none of my browsers are rendering it as you hoped. For me in Chrome the first image looks vaguely like a landscape, with no identifiable features, and in Firefox it looks like grass (both on Android). The dog and tree shapes look distorted and glitchy, but recognisable if you know what they're supposed to be.

      I spotted a typo: "font's like".

      • gus_massa 36 minutes ago
        I agree, a few screenshots would be helphful for users of unsuported browsers.
      • benswerd 2 hours ago
        Just pushed fix to typo — can you let me know which chromium browser on which platform?

        I'm primarily testing on Vivaldi on MacOS but also confirmed working on Chrome on MacOS.

    • 5-0 1 hour ago
      Neat! Sparklines could also benefit.
  • achairapart 2 hours ago
    Testinۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗ ings۪۪۪۪۪۪۪۪۪۪۫۫۫۫۫۫۫۫۫۫...
    • araes 11 minutes ago
      Also,

      Tۜۜۜۜۜeۢۢۢۢۢsۛۛۛۛۛtۙۙۙۙۙiۚۚۚۚۚnۨۨۨۨۨg۫۫۫۫۫

      T◌ۜ◌ۜ◌ۜ◌ۜ◌ۜe◌ۢ◌ۢ◌ۢ◌ۢ◌ۢs◌ۛ◌ۛ◌ۛ◌ۛ◌ۛt◌ۙ◌ۙ◌ۙ◌ۙ◌ۙi◌ۚ◌ۚ◌ۚ◌ۚ◌n◌ۨ◌ۨ◌ۨ◌ۨ◌g◌۫◌۫◌۫◌۫◌۫◌

      |ۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗۗ|ۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘۘ|ۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙۙ|ۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚۚ|ۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛۛ|ۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜۜ|۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟۟|۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠۠|ۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡۡ|ۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢۢ|ۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧۧ|ۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨۨ|۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫۫|۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬۬|ۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤۤ.

      Tۜۜۜۜۜeۢۢۢۢۢsۛۛۛۛۛtۙۙۙۙۙiۚۚۚۚۚnۨۨۨۨۨg۫۫۫۫۫

      Author's specific examples: Aۜۢۛۜۢۛۜۢۛۜۢۛۜۢۛ Bۙۚۨ۫ۙۚۨ۫ۙۚۨ۫ۙۚۨ۫ Cۣۣۣۣۣۣۣۭۭۭۭۭۭۭ Dۣۭۣۭۣۭۣۭۣۭۜۢۜۢۜۢۜۢۜۢ

      Edit: Apparently, you cannot write direct html entities.

      Edit: And you cannot directly write the characters either. Rendering seems rather finicky on Firefox, while Chrome seems somewhat consistent.