Page MenuHomePhabricator

Line break before last word in <div> with "display:table-cell" and inline formula
Closed, ResolvedPublic

Description

Hello,

If one sets the preference to "MathML with SVG or PNG fallback" and on has a formula in a <div> with display: table-cell then the last word will be displayed in a new line (even if there is enough horizontal space for displaying the last word in the previous line).

Steps to reproduce the bug

  1. Go to https://test2.wikipedia.org/wiki/Main_Page
  2. Make sure, you are logged in and select in your preferences "MathML with SVG or PNG fallback" for formula rendering (tab "Appearance")
  3. Go to a random page: https://test2.wikipedia.org/wiki/Special:Random
  4. Save the following code:
<div style="display:table-cell;">The formula: <math>\lim_{n\rightarrow\infty} q^n = 0</math>. Some sentence.</div>

Actual result: The word "sentence." will be on the next line as there is a line break before it. Screenshot:

2014-11-24-211040_598x356_scrot.png (356×598 px, 49 KB)

Expected result: The whole paragraph is on one line (if the horizontal space in the browser window is wide enough).

Browser: Firefox 33.0 on Ubuntu 14.04

Notes: The bug does not appear with the settings "PNG images" and "Client-side MathJax" for math rendering.

Workaround:

The Bug disappears if one changes

.mwe-math-mathml-inline {
    display: inline !important;
}

to

.mwe-math-mathml-inline {
    display: inline-block !important;
}

Necessity of a bugfix: At the German Wikibooks I write a book called "Mathe für Nicht-Freaks". Here we use <div>-tags with display:table and display: table-cell for our boxes with icons. We do not use floated divs because of this issue. So above bug occurs in each box with an inline formula.

Event Timeline

Kulla raised the priority of this task from to Needs Triage.
Kulla updated the task description. (Show Details)
Kulla added a project: Math.
Kulla changed Security from none to None.
Kulla added a subscriber: Kulla.

A wouraround is to use inline math

<div style="display:table-cell;">The formula: <math display=inline>\lim_{n\rightarrow\infty} q^n = 0</math>. Some sentence.</div>

I have unsufficient information if the propsed change might break things elsewere. @fredw, @Pkra Any idea?

Honestly, I don't know. It does not look that way to me but I'm not a CSS expert.

FWIF, the problem can be isolated, see http://jsbin.com/sificitovo/1/edit?html,output. I don't know how this should behave. displaystyle toggles which surprises me; could be a browser bug, I suppose.

a) this seems invalid since the math extension no longer serves visible MathML
b) if I unhide the MathML manually, I cannot reproduce this (on enwiki).

Either way, it seems this can be closed.