I am working on in–browser editor for print products. The (relevant part of) workflow goes as following:

  1. User sees image (technically SVG file, loaded into page DOM).
  2. User can select certain designated text elements on the image, discoverable by highlight on cursor hover.
  3. Having selected text element, user can modify text and/or color of the element, using control elements next to the image.
  4. User sees changes applied to the image immediately.

Now the issue is if user deletes all of the text in element then there is nothing to click on anymore. The element technically and logically performs the role of both content and clickable area.

How to handle such issue?

The variants I have considered so far:

  1. Prevent user from being able to completely erase text, such as making last symbol undeletable. This is just meh editing experience.
  2. If the text is erased replace it with some kind of placeholder value, such as [empty] string. This doesn't work if user wants text to be gone.
  3. Try to preserve clickable zone in some way, such as using placeholder from (2), but making it fully transparent and only reacting to hover.

I guess I could try decouple the role of target area from text, but at the moment it would be challenging to do dynamically in editor and can't be done in advance since image files are produced by third parties.

What would be optimal from user experience point of view here?

  • Would it make sense to have a separate "Add Text" button, enabled only when no text is present, that adds a placeholder to the image like "Your Text"?
    – HABO
    Jul 10, 2014 at 20:11
  • @HABO the location of text is not arbitrary. Designer creates the image, then shop's admin uploads it and designates which elements are editable (via different editor in administration area). So user isn't given freedom to add any text, just manipulate existing text in constraints of existing design.
    – Rarst
    Jul 10, 2014 at 20:19
  • I wasn't assuming that the user could arbitrarily manipulate the text, only seeking a means to make your option (3) work by forcing a bit of text back into the image. The user would then click on the displayed text and proceed as before.
    – HABO
    Jul 10, 2014 at 20:28
  • @HABO I am not quite following. For example I have five editable text lines on image. User erases text in two of them. What would/should "Add text" button affect? PS we already have "reset" button that discards all changes to image, which is nuclear solution to the issue
    – Rarst
    Jul 10, 2014 at 20:40
  • The idea is to have an obvious way for the user to get back to having something they can edit. If your application allows five lines of text and the user erased text on two, then the "Add Text" button would put placeholder text back on the two empty lines so that the user will have targets that they can select and edit. It could be a single character (¤) to provide a target to click on or a line ("Edit this!") to remind them to finish their editing. Perhaps there is a button label that makes more sense in the context of your application, e.g. "Mark Text Locations".
    – HABO
    Jul 10, 2014 at 21:01

1 Answer 1


You can add visibility or transparency property to your text element and manipulate it in most suitable way. For example:

  1. Add checkbox for each text element outside image so user need not to edit text to make it invisible. If user edit text and delete all symbols you can replace text in element with some placeholder text and set its visibility to false.

  2. Implement 'Show Text Areas' button/checkbox. When user press/check it he can see all text areas on image outlined even empty ones. Then he can point his mouse to this area and edit text in it.

  3. Add transparency color or property too element editing menu so user can set it and text dissapeare from image after setting it. Then use your Reset button to reset transparency. You need place holding text in this case - use meaningful editable area name or prompt as well as italic font to display it for example.

  • 1
    Went with simplest possible implementation for now — empty text is replaced by transparent placeholder, which still reacts to hover in same way as rest of editable text elements for discovery.
    – Rarst
    Jul 16, 2014 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.