The ctools-link arrow has an unexpected width in views under Chinese version.
In the inspector, I found that is equal to a Chinese character font-size which is defined in .ctools-button-processed
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
.
Comment | File | Size | Author |
---|---|---|---|
ctools-fix_arrow_style.patch | 277 bytes | amourow | |
|
Comments
Comment #2
yosia_ken CreditAttribution: yosia_ken as a volunteer commentedIt works with Chinese!
Comment #3
blauerberg CreditAttribution: blauerberg commentedThis patch also works fine with Japanese.
Thanks!
Comment #4
yosia_ken CreditAttribution: yosia_ken as a volunteer commentedNeed more people review this
Comment #5
thebrecht CreditAttribution: thebrecht as a volunteer commentedIt works on Traditional Chinese version.
Comment #6
jamesliu78It's work.
Drupal 7.55
Chaos tools 7.x-1.12
Chinese, Traditional
Comment #7
cobenashits work. Thanks.
Comment #8
droplet CreditAttribution: droplet commentedIt's broken on multiple words with space, even English.
Any change to use CORE standard class instead?
So replace inner text "open" with:
and then we could remove the custom hide element style, e.g
text-indent: -9999px;
. This way will be better in perofrmance & accessibility.Comment #9
droplet CreditAttribution: droplet commentedNeeds work :)
CJK like Chinese has no spaces (中文) that why
word-break: keep-all
works. Try to change translation too p e n
or辛苦了 空格作惡
:)Comment #10
amourow@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.
Comment #11
droplet CreditAttribution: droplet commentedAre you sure?
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
Comment #12
amourowI 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.Comment #13
amourowPatch 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.
Comment #14
droplet CreditAttribution: droplet commentedTheoretically, 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 ifspan.element-invisible
fixed the bug. And removetext-indent: -9999px;
Other than that, the patch really to go!
Comment #15
amourowre-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 addingspan.element-invisible
at all.Comment #16
droplet CreditAttribution: droplet commented`white-space: nowrap`
I thought this is unnecessary but just no harmful. It proposed adding to `.element-invisible`
Comment #17
droplet CreditAttribution: droplet commentedIf you interested in further: #2909931: Refresh CSS CLASS: .visually-hidden
Comment #18
amourowI 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.
Comment #19
geek-merlinComment #20
DamienMcKennaIsn't
text-indent: -9999px
the wrong way of doing anything with modern CSS?Comment #22
joelpittetGave 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.
Comment #24
vanlanh10273 CreditAttribution: vanlanh10273 commentedHi, this issue still showing when removed
text-indent: -9999px;
.I'm don't have this issue before updating new release.
Comment #25
roadlittledawn CreditAttribution: roadlittledawn commentedYeah, 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 usingtext-indent: -9999px;
orwidth: 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 forctools-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?Comment #26
joelpittet@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.
Comment #27
TunprogThanks @joelpittet and @vanlanh10273,
Upgrading Views to version 7.x-3.23 solved the issue.
Comment #28
TunprogThere 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