The ctools-link arrow has an unexpected width in views under Chinese version.
wrong arrow

In the inspector, I found that is equal to a Chinese character font-size which is defined in .ctools-button-processed
wrong arrow width in Chinese

The issue also applies to all CJK characters, the text-indent in .ctools-dropbutton-processed .ctools-link remove all space for Latin letters but leave a CJK character. Indeed it's because each CJK character is default to be broken into lines when lack of width, but a Latin word will only be broken by space.

The issue can be easily patched by adding { word-break: keep-all } to .ctools-dropbutton-processed .ctools-link.
correct arrow

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

amourow created an issue. See original summary.

yosia_ken’s picture

Status: Needs review » Reviewed & tested by the community

It works with Chinese!

blauerberg’s picture

This patch also works fine with Japanese.
Thanks!

yosia_ken’s picture

Status: Reviewed & tested by the community » Needs review

Need more people review this

thebrecht’s picture

It works on Traditional Chinese version.

jamesliu78’s picture

It's work.
Drupal 7.55
Chaos tools 7.x-1.12
Chinese, Traditional

cobenash’s picture

its work. Thanks.

droplet’s picture

Title: Dropbutton arrow width glitch on CJK locale » Dropbutton arrow width glitch on CJK locale (translation with space)

It's broken on multiple words with space, even English.

Any change to use CORE standard class instead?

So replace inner text "open" with:

<span class="element-invisible">open</span>

and then we could remove the custom hide element style, e.g text-indent: -9999px;. This way will be better in perofrmance & accessibility.

droplet’s picture

Status: Needs review » Needs work

Needs work :)

CJK like Chinese has no spaces (中文) that why word-break: keep-all works. Try to change translation to o p e n or 辛苦了 空格作惡 :)

amourow’s picture

Status: Needs work » Needs review
FileSize
275 bytes

@droplet was right. word-break: keep-all does fix the issue however only for CJK.
But the core class won't help to resolve this.

There are two DOM relative to the issue.
The .ctool-link for styling the text and its child .ctool-twisty for the arrow (according to the CSS comment).

In this case, when the .ctool-link has break lines, the width of the last word stay.
e.g. open open

Tried to set the child span with .element-invisible but it makes the arrow disappear; make the span font-size 0 will lose the position flexibility.

The new approach is to just force the width of .ctool-twisty to be 0.
It should do no harm to others since it's only for creating the arrow.

droplet’s picture

FileSize
35.36 KB

Are you sure?

Tried to set the child span with .element-invisible but it makes the arrow disappear; make the span font-size 0 will lose the position flexibility.

The new approach is to just force the width of .ctool-twisty to be 0.
It should do no harm to others since it's only for creating the arrow.

One of the reason we don't set ZERO to styles is keeping better accessibility for screen-readers. @see D7 .element-invisible and D8 .visually-hidden

Also @see D8 Views UI. (drop buttons)

Thanks

amourow’s picture

I was adding the .element-invisible to the a.ctool-twisty itself. The formal description was not correct.

D8 also applies width zero to the arrow.
Wrap the link text once more with .element-invisible is better.

amourow’s picture

Patch updated. Wrapping the text with span.element-invisible
This will keep the space of text and still compatible with the screen readers.

Anyone knows about how to test when the dropbutton link is an image? Not sure

Ref.

  1. http://webaim.org/techniques/css/invisiblecontent/
droplet’s picture

Theoretically, ZERO in D8 is a bug but D8 supports less older devices now. We might not need a fix anymore.

I suggested dropping width:0 in patch if span.element-invisible fixed the bug. And remove text-indent: -9999px;

Other than that, the patch really to go!

amourow’s picture

re-roll the patch.

I've discarded the width change and remove the text-indent from .ctools-link, and add a new attribute to the ctools-twisty for better accessibility.

During the research, I found another related issue about the word wrap (Beware smushed off-screen accessible text). There is a additional thing to make the accessibility better, hence added the white-space: nowrap. This change amazingly works for the original space issue regarding all translation without adding span.element-invisible at all.

droplet’s picture

Status: Needs review » Reviewed & tested by the community

`white-space: nowrap`

I thought this is unnecessary but just no harmful. It proposed adding to `.element-invisible`

droplet’s picture

amourow’s picture

I agree that could be considered to add into element-invisible.

Before it backport to D7, let's add it here for ctool. I tested VoiceOver on macOS, and it's not easy to focus on the arrow link. If I have time to test it through, I might update it again.

Thanks for review, it was a good discussion regarding accessibility.

geek-merlin’s picture

Issue tags: -ui +low-regression-risk
DamienMcKenna’s picture

Isn't text-indent: -9999px the wrong way of doing anything with modern CSS?

  • joelpittet committed 004fcb4 on 7.x-1.x authored by amourow
    Issue #2908901 by amourow, droplet, yosia_ken, thebrecht, blauerberg,...
joelpittet’s picture

Status: Reviewed & tested by the community » Fixed

Gave it a manual test and it works well. I've committed this to dev for the next release. Thanks for the patch and others who reviewed this.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

vanlanh10273’s picture

Hi, this issue still showing when removed text-indent: -9999px;.
I'm don't have this issue before updating new release.
My issue

roadlittledawn’s picture

Yeah, same here as vanlanh10273. Just updated our ctools module from 7.x-1.12 to 7.x-1.15 and all admin dropdown buttons were super wide due to the text 'open' (same as in his screenshot). Changing that CSS rule for .ctools-twisty in dropbutton.css back to using text-indent: -9999px; or width: 0; fixes it.

When I edit the HTML live and insert <span class="element-invisible">open</span> inside the <a> element, it also effectively hides text and arrows render as expected. But for some reason (even though I see the the element is set in dropbutton.theme.inc file, the element is not included. Seems to be the case in all admin dropbuttons so far. I searched through module files for ctools-twisty and I saw Views has that HTML hard coded, but when I changed it to use <span> it was not included in the Views dropbutton HTML and issue persisted. So I'm a little stumped why that <span> is not included, which would be the preferred solution here, right?

joelpittet’s picture

Issue tags: -low-regression-risk

@vanlanh10273 that is a similar but new problem, turns out views was using ctools classes so this fix broke one button in views. If you use the dev release of views or the next release it has a fix. Or if you prefer the patch in #3032213: When admin theme is not a modal window, .ctools-twisty .ctools-text arrow stretched for view, clone, delete, disable button if you want to keep your version of views.

Tunprog’s picture

Thanks @joelpittet and @vanlanh10273,

Upgrading Views to version 7.x-3.23 solved the issue.

Tunprog’s picture

There is a similar issue with the Scald module and it's fixed with a patch:

Latest ctools (1.15) update breaks operation links on scald atoms