See the example below, taken from Open Office on Mac (the same happens with most editors I know, and even graphics software such as Photoshop or Illustrator)

enter image description here

As you can see, the editor clearly shows the formatting when the formatting is the same for all characters in a selection. However, when there are mixed formats, some editors shows everything as not formatted(as in Open Office's case), or in some cases, and quite randomly, as everything is formatted.

Now, my question is: is there a way to show that text format is something like all / none / mixed ? If so, is there an example of this?

(Just in case, I'd need this for a web and mobile app, not software GUI, but any answer would help)

  • You mean it reflects it in the buttons pressed/not-pressed? – Alvaro Jan 31 '17 at 19:01
  • @Alvaro , yes, exactly – Devin Jan 31 '17 at 19:23
  • Devin, is mixed really has sense? Formatted text itself is clear visual mean to show mixed state. Buttons remain actionable and apply appropriate formatting on the whole selection on click. – Alexey Kolchenko Jan 31 '17 at 21:15
  • Yes it does. Some fonts with wide range of thickness (ultra light or hairline, light, regular, semibold, bold, heavy) are virtually undistinguishable at 14px, which is pretty much an almost default size for most of the web. Also, it's really weird to have random control states instead of clear states, it's like the definition of an UX antipattern. Otherwise, we should forget about GUI controls and only care about the effect of those controls, with unpredictable results. PS: I use glasses, so my vision is a bit worse than other people – Devin Jan 31 '17 at 21:59

As I see it, these buttons have two purposes:

  • Perform an action: switch state
  • Inform: current state

The second part is where it gets more confusing because we have to make the decision if the selected text is:

  • a single selection
  • multiple selections of characters

and I believe there is no evident answer. Showing the Bold button pressed because there is one character bold is not true, but showing it not pressed neither.

The best solution I can think of is a third state:

  • Inform: it should transmit that there are characters bold/not-bold
  • Action: in my opinion it shouldn't perform any action, so basically be a disabled button

On a side note as it is slightly related (not sure if should be left for a comment), there is a similar case in a different context. In Spain before entering a tunnel there is a traffic sign that indicates the obligation to turn the car lights on. The obligation remains until there is a sign denying the previous indication. As it wouldn't be appropriate to use the same sign crossed out (which would indicate obligation to turn lights off, or that they are no longer needed to be on) this is the solution:

which leaves it open (lights are obligatory at night but not at day time).

  • yes, my idea is a 3rd state, which is really trivial to implement, but I was wondering the reason why this wasn't implemented anywhere I know of, being such a trivial thing – Devin Jan 31 '17 at 22:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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