Usebility Improvement for the CKEditor Toolbar

Development
1

When XWiki is displayed in German, the paragraph format (Absatzformat) dropdown is too narrow to display the full heading level. For example, instead of showing Überschrift 1, it only displays Übersch…. To determine the actual heading level, you have to open the dropdown menu:

DEEN

There are several options to address the problem:

  1. Modify the translation to 1. Überschrift instead of Überschrift 1.
  2. Increase the default size of the field in the toolbar.
  3. Make the field responsive to the text length.

I’m not sure which option I should suggest. What do you think would be the best solution from a development perspective?

2

cc @tkrieck @CharpentierLucas

3

  1. I’m not a native German speaker, so I cannot tell you how good the first solution is. If you need a quick patch on your instance, you can definitely go with this since this must be the easiest solution :slight_smile:
    From a quick search, it should be the translation key core.edit.wikiToolbar.h1.
    We could change this translation for everyone, but this wouldn’t solve the problem for any other language.

  2. Wouldn’t solve the problem for every language either. There could be a langage or entry that gets longer than what we pick here. In addition, if we increase the width, it would mean most entries are mostly empty. It’s already the case for Normal here, but it looks okay since it doesn’t take a significant portion of the display, and most lines are somewhat full.

  3. I’m not sure to understand what you exactly mean here.

I think defining a wrapping strategy on this text so that it still displays correctly when it’s unexpectedly large sounds like the best solution to me.

Thanks for the report!
Lucas C.

PS: Creating an issue to follow the status of this bug. → Loading...

4

We did it this way:

/* Texte im Editor-Auswahl-Pulldown-Menü werden wegen der Übersetzung oft abgeschnitten */
.cke_combo_text {
    width: auto !important;
}

{870C9151-CB53-4C85-A7AF-2E41B1EC1610}

Just in case: we dropped H1 because the title always is H1 and we should have only one H1 for a11y reasons.

We use this since XWiki v13 I think.

5

The CSS workaround works exactly as I expected! :wink:

6
  • Option 1 using translation is not consistent with typical translations, such as those in Word. So it’s quick but dirty.
  • Agreed.
  • I was thinking: width: auto.

That sounds like a good idea. It would essentially combine options 2 and 3.