Keeping Font Letters Straight

I am working on a project that keeps text private on the web. A way to post text and prevent it from being printed or copy and pasted easily. I do this by breaking up the alphabet into three separate fonts. A top font a bottom font and a middle font. To make the source readable I loop over the fonts and like animation the text should be readable. My problem is that the browser shifts the letters around slightly left and slightly up and down. Is there a way to stop this? Here is a link to an example. https://afternoon-sierra-56089.herokuapp.com/

Thank you.

Tagged:

Answers

  • edited June 2017

    Interesting ideas!

    1. The line height on your middle font is incorrect -- it needs to have wider bands above and below.
    2. The line length of your fonts are not lined up -- Top Font has a shorter line length than Middle Font, but they must be the same.
    3. In general, your Top, Middle, and Bottom fonts should be the same only with areas cleared out. Instead, they are different.
    4. This strobing approach could be dangerous to the health of some viewers. It probably needs to come with an epilepsy warning and be turned off by default until clicked.

    Also note that:

    1. If the goal is to prevent screen photograph from capturing the full text then ascenders and descenders are pretty good at conveying the full text. As an alternative you could also try whiting out 2/3 of the letters and showing the remaining letters full-height -- although it still won't beat video.
    2. If your text can be cut-pasted then rot-13 (or rot-22, etc.) like "Lipps Sri erh Epp" is not particularly secure. Given nothing but the plain text it is trivial to notice that it is rot and then guess in a few seconds what the rotation is. Perhaps arbitrarily scrambled each time the font loads?
Sign In or Register to comment.