thanks for filing this :)

I'd suggest we keep the text to the right. If it exceeds the space available on that side, then truncate the text - and to show the full version of it we can use the Tooltip component. thoughts?

If it exceeds the space available on that side, then truncate the text - and to show the full version of it we can use the Tooltip component.

Is truncation needed, I thought we already limit the characters via the CC form?

Correct me if I'm wrong, having only now looked closer into this, but isn't the issue that we always put the text below the image instead of next to it? This rather seems like a direct bug to me.

That being said, we do limit the text to 150 characters. Though if browser window is small, then we might still have not much space for those.

In T386844#10606497, @KStoller-WMF wrote:

If it exceeds the space available on that side, then truncate the text - and to show the full version of it we can use the Tooltip component.

Is truncation needed, I thought we already limit the characters via the CC form?

I am assuming the number of lines varies depending on the screen size (e.g. a wider screen allows more characters per line)?

Note that the way this box is laid out, it would be hard to control it. I made some attempts using grid, but that didn't work well. Once I let go and just used a good old float, it just works. The text flows nicely, and you don't need to truncate it. See my layout proposal:

Also note that using "Read more" / "Learn more" is complicated in terms of doing it correctly in terms of UX/accessibility. Some articles on that:

• https://www.nngroup.com/articles/learn-more-links/
• https://www.visionaustralia.org/business-consulting/digital-access/blog/how-to-make-read-more-links-accessible
• https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html

In T386844#10615818, @Nux wrote:

Note that the way this box is laid out, it would be hard to control it. I made some attempts using grid, but that didn't work well. Once I let go and just used a good old float, it just works. The text flows nicely, and you don't need to truncate it. See my layout proposal:

Nice. This is exactly what I envisioned for this module. It looks better and uses the available space much better than the current layout.

In T386844#10615818, @Nux wrote:

Note that the way this box is laid out, it would be hard to control it. I made some attempts using grid, but that didn't work well. Once I let go and just used a good old float, it just works. The text flows nicely, and you don't need to truncate it. See my layout proposal:

that looks great, thanks so much! I think this is a great layout and can move forward with it.

Also note that using "Read more" / "Learn more" is complicated in terms of doing it correctly in terms of UX/accessibility. Some articles on that:

• https://www.nngroup.com/articles/learn-more-links/
• https://www.visionaustralia.org/business-consulting/digital-access/blog/how-to-make-read-more-links-accessible
• https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html

hm, good catch — thanks for pointing this out. since the label of the CTA is community configurable, I wonder if we can add a description on the field that advises to not use this language. what do you think @KStoller-WMF ?

In T386844#10625925, @JFernandez-WMF wrote:
hm, good catch — thanks for pointing this out. since the label of the CTA is community configurable, I wonder if we can add a description on the field that advises to not use this language. what do you think @KStoller-WMF ?

I assume the note about "Learn More" relates more to the fact that we currently use that as the example design in this task and also on related help pages: https://www.mediawiki.org/wiki/Help:Growth/Tools/Community_updates_module

Maybe we should just update the design on the help page?

Regarding the Community Configuration copy: we should aim to keep it concise, but I'm open to suggestions for improvement. While we don't want to be too specific, there’s definitely room to enhance clarity. For example, I'm unsure if terms like "Destination page" and "Label" are intuitive for admins completing the form. If you have any ideas for improving the copy, please add a task.

Change #1130566 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] fix(CommunityUpdates): avoid line break on long text

https://gerrit.wikimedia.org/r/1130566

In T386844#10667488, @Sgs wrote:

no justify	justify

Should the text alignment be "justified"? cc @AAlhazwani-WMF

non-justified. for shorter texts, better to lean on left-/right-aligned text.

for context: justified text works okay for longer paragraphs of text, when hyphenation CSS rules are active, eg. word-wrap, overflow-wrap, and hyphens. such rules help in avoiding inconsistent spacing between words, which can lower legibility. it's even better when we can specify language-specific hyphenate-limit-chars, which is non-trivial for us, and the tech is not available yet.

Change #1130566 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] fix(CommunityUpdates): avoid line break on long text

https://gerrit.wikimedia.org/r/1130566

Tested on enwiki beta

maxed out all fields - Title, Body text, and Call to action-Label	maxed out all fields - no image

Light mode	Dark mode

Sidebar expanded	Sidebar hidden

Works great on plwiki too. Thank you.

In T386844#10711118, @Nux wrote:

Works great on plwiki too. Thank you.

@Nux - thank you so much for confirming!