Real-to-fake text plugin

I use to build my interfaces based on real content (often not the final one but really close to) in order to design page elements that better fit it and also help me to check the overall aesthetic of the page.
My problems come when I show those wireframes to various stakeholders. They are totally unable to abstract and start reading instead of focusing on design solution.

I wonder if there’s a smarter way than replacing all text with ‘Lorem ipsum…’ ore lines.
Maybe a sort of plugin that converts real text to something unreadable?

If you face the same problem please let me know…

Right click on any text block, label or element and select ‘Fill with Lorem Ipsum’. It should give you the same number of characters.

You might want to duplicate your whole set of pages before you do this so you can quickly revert to the real text.

Thanks Dave
I already know about that feature but it forces me to change widgets one by one.
I’d need a quicker way to do it… a sort of ‘replace all’ button.

I think I’m going to suggest Axure devs for future improvements…

Hi!

This plugin will change each character to the next ASCII character (unless it’s in the dontChange list, which contains punctuation, the space character, etc.).

<script>
  $(document).ready(function() {
    const dontChange = '!@#$%^&*()_.,| -\f\n\r[]{}\\<>:;\'\"Zz1234567890';
    ($('div').find('span')).each(function(index, value) {
      let newString = '';
      const oldString = $(this).text();
      for (let i = 0; i < oldString.length; i++) {
        const char = oldString.charAt(i);
        const code = oldString.charCodeAt(i);
        if (dontChange.indexOf(char) >= 0) {
          newString = newString.concat(char);
        } else {
          newString = newString.concat(String.fromCharCode(code + 1))
        }
      }
      $(this).text(newString);
    });
  });
</script>

Put it in the head tag.

1 Like

Hi again!

Here’s a more natural version. It takes each consonant and replaces it with the next consonant of the same case (upper, lower), and does the same for vowels.

I removed certain consonants from the replace list because it looks crazy when – for example – a common letter like T gets replaced by V (or P for Q, etc). Still scrambles things enough.

<script>
  $(document).ready(function(){
    const vowels ='AEIOU';
    const consonants = 'BCDFGHKLMNPRST';
    const letterSets = [vowels, vowels.toLowerCase(), consonants, consonants.toLowerCase()];
    ($('div').find('span')).each(function(index, value) {
      const oldString = $(this).text();
      let newString = '';
      for (let i = 0; i < oldString.length; i++) {
        const oldChar = oldString.charAt(i);
        let newChar = oldChar;
        for (letterSet of letterSets) {
          let letterLoc = letterSet.indexOf(oldChar);
          if (letterLoc >= 0) {
            letterLoc = (letterLoc + 1) % letterSet.length;
            newChar = letterSet.charAt(letterLoc);
            break;
          }
        }
        newString = newString.concat(newChar);
      }
      $(this).text(newString);
    });
  });
</script>