Page MenuHomePhabricator

VisualEditor: Inline templates don't wrap, assume width:100%, so break layout around floated items
Closed, ResolvedPublic

Description

In Visual Editor edit screen templates that produce a single line of displayed text (regardless of the length of that line) do not wrap on word boundaries.

Steps to reproduce:

  1. Insert a picture or other right-aligned object that text should wrap around.
  2. Transclude a template that produces a single line of text. {{EW charity|123456|This charity has got a long name to make it easy to test this bug}} is an example
  3. Reduce the width of your browser window until the text produced by the template is longer than the avaialble space between the left margin and the picture.

Expected behaviour: The last word(s) of the text produced by the template wraps onto a second line.
Actual behaviour: The entire line moves to below the picture as a single unit.

Any template that produces two or more lines of displayed text (on an infinitely wide window) does not exhibit this behaviour and wraps correctly. For example:

"Long text<br>1" wraps correctly

"Long text
1"
"Long text<br>" and
"Long text<br>
<!--hidden-->" all exhibit this bug.


Version: unspecified
Severity: normal
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=52445
https://bugzilla.wikimedia.org/show_bug.cgi?id=50395

Details

Reference
bz51708

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 1:51 AM
bzimport set Reference to bz51708.
  • Bug 52320 has been marked as a duplicate of this bug. ***
  • Bug 62800 has been marked as a duplicate of this bug. ***

Inline templates are overridden to inline-block, but setting them back to inline would mean we have to calculate the highlights using getClientRects. Might want to wait for the much discussed SVG highlights for this?

Change 139806 had a related patch set uploaded by Esanders:
Remove display:inline-block highlight hacks

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

Change 139806 merged by jenkins-bot:
Remove display:inline-block highlight hacks

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