Garble Text on screen to hide private info (with added features!)

[Moonbase59]

Garble Text on screen to hide private info (with added features!)

New version 2021-08-27. Adds CJK and other non-Latin languages hiding. Not perfect, but works, see video below.

Sometimes one wishes to hide private information on a screen, maybe for doing a screenshot or just to avoid prying eyes. The developers have given us app.garbleText() for that, which can be used from the developer console or from within a plugin like Garble Text.

Now I had a few additional requirements:

• It should also obfuscate images and SVGs.
• It should look more like a “mockup”.
• It should reveal hidden text and images on mouse hover or touch (on mobile).
• Any fonts used should not come from the Internet but be included so that offline operation would be possible.
• It should work on all platforms, including mobile (both Android and iOS).

Thus, garble-text.css came into being.

What garble-text.css can’t do:

• garble file info popup text (in file explorer)
• garble text in the modals (unreadable settings, command palette and search suggester would be a pain anyway!)
• garble note names in the graph (that’s a canvas so it can’t work on that)

Installing the Garble Text plugin

Install the Garble Text community plugin as usual.

Correction for mobile use

It can’t currently directly be used on mobile, I filed an issue about that. It works alright, but the developer hasn’t yet allowed mobile use.

So for now open the plugin’s manifest.json file in a text editor. It’s usually located in your vault’s hidden folder ./obsidian/plugins/garble-text/.

Find where it says

	"isDesktopOnly": true

and modify as follows:

	"isDesktopOnly": false

Save the file.

Activate and set a hotkey

Restart Obsidian and activate the plugin:

Then set a hotkey for it. I used Ctrl+Shift+O (Obfuscate) for it:

Testing

If your desktop looked like this

and you activate the hotkey combination, it should now look like this:

You will notice that hovering the mouse cursor doesn’t help to reveal anything, and also the image is shown clearly.

Use the hotkey combo again to switch off the obfuscation.

Install the garble-text.css snippet

Copy the following CSS code and save it into your vault’s hidden .obsidian/snippets/ folder under the name garble-text.css. Should the folder not yet exist, create it first.

CSS Code

garble-text.css (171.8 KB)

Note: Some features will be available only after Obsidian includes Chromium 92+. They already work fine on Obsidian Mobile 1.0.4 (Android). I’ve filed a feature request for that.

Copy exactly as it is, don’t reformat, add linebreaks or such! You might otherwise break the display fonts that are included in a highly-compressed format (woff2). Thanks to Christian Naths for making the font and licensing it so freely!

Restart Obsidian and activate this CSS snippet:

Testing

Now use the same hotkey combo you defined above to activate the “garbled” mode. Your desktop should now look like this:

Experiment with hovering the mouse, use plugins, write a test note and check if everything works.

Remember the hotkey is a toggle—each time you press it, the state will switch between normal and obfuscated.

Mobile use

Hint: It’s much easier editing the plugin’s mainifest.json and creating the garble-text.css file on the desktop first and then copying them over to the mobile device (or using Sync to do that).

The plugin and the CSS snippet have been tested on both Android and iOS mobile devices and should work flawlessly.

If using this feature more often, I recommend

• pinning the “Garble Text: Toggle Garble Text” command to the command palette so it’s always at the top, without searching
• adding the “Garble Text: Toggle Garble Text” command to your editor toolbar, so you have it available with only one click. Note: The developer hasn’t yet provided a toolbar icon, so it will show in the toolbar as a ?. See issue #4.

Short demo video

The video is available online.

There is another video showing the new version hiding non-Latin glyphs on my Android phone. Not perfect, but at least hides.

Screenshot (Android)

Changelog

• 2021-08-22
  • Initial version, internal & external testing on desktop, laptop, Andoid and iOS.
  • Documentation.
• 2021-08-25
  • Initial release and published in Obsidian Forums.
• 2021-08-27
  • Updated to include “Last Resort” font that will hide non-Latin glyphs.

[Klaas]

@Moonbase59 good stuff Matthias, very useful.

1 small remark: I noticed you are using a mixture of px and em: aren’t you contravening your own recommendation?

[Moonbase59]

Yah, I am lol … but couldn’t really make the image blur dependent on some font size of an unknown parent element …

[Klaas]

@Moonbase59 OK, you’re forgiven

[obsidian337]

Wonderful feature!

It doesn’t seem to work for CJK characters.

Is it the problem of garble plugin?

[amrnt]

Is there a way to make this work on the graph? This is where i would like to use this plugin the most.

[Moonbase59]

Hm. Maybe due to the rather restricted font I use (to keep it small). What happens if you switch off the CSS snippet? Does it display lines correctly for the CJK chars?

[Moonbase59]

I don’t see one, since the graph is actually a canvas. It will obfuscate the menu, but sadly not the names …

Adding that to the description above, thanks!

[amrnt]

Too bad, but an extremely useful plugin nonetheless.

[obsidian337]

Regardless of your CSS snippet On/Off, Egnlish alphabets are obfuscated.(The obfuscated patterns are somewhat different.). But, CJK characters are not obfuscated.

[Moonbase59]

You got a vaild test string for me? (I have no CJK keyboard and wouldn’t know the words anyway!)

[anon12638239]

This? I can’t get the CJK to garble.

你有一个有效的文本字符串给我吗？ （我没有 CJK 键盘，反正我不会知道这些词！）

Angel

cjk.md (280 Bytes)

[Moonbase59]

Yup, thanks! Seems (both the dev’s and my) fonts don’t take the full Unicode range, hm. That would of course make them much larger, and I’m not really into font editing. Guess there could be one substitution character for all—or most—of them since almost all of these are rather “blocky”, but still the table would be large.

So either we’d have to wait for someone who is real good at font editing, or ask upstream, which could take a loooong time.

Thanks for providing the file, and with you just using my words!

[anon12638239]

Gern geschehen!

Angel

[Moonbase59]

Well, I experimented a little, using a font that has (almost) all Unicode code points, but only a very few glyphs, all the same size. It’s still a multi-megabyte thing, so probably not worth the effort, and it looks horrible …

[Moonbase59]

@anon12638239: There is a new version in the first post that uses the “wiggly lines” plus the above “blocks” for anything that it can’t display, i.e. CJK characters.

See new description and video and let me know if that could be a solution for you until we can have anything better, will you?

[anon12638239]

Hello.

Personally, I don’t have a need to garble my text (because everything I write is garbled nonsense anyway, which no one else would ever want to read or understand), but I read this thread out of interest, saw your request for some CJK, and thought that I could help a little by providing a test file for you. I’m a meliorist by instinct. I apologise if my contribution was inappropriate in any way

I have installed the plugin and css file and tested them on my Mac. Worked perfectly. Assume any CJK user with a need to garble their screen will find it easy to use and very convenient. Ingenious idea and implementation.

Angel

[Moonbase59]

@anon12638239

meliorist

Meliorism, yeah … believe in that too. Nothing inappropriate here, on the contrary! Thanks for your kind words!

[obsidian337]

It works very well as shown in the video.

Thnak you for your work.