9

Titles with MathJax break in the related questions.

It doesn't matter whether I'm logged in or not.

It happens on Google Chrome and on Firefox.

Screenshots from physics.SE and mathematics.SE:

enter image description here enter image description here

  • There is a also a similar problem on japanese.SE: meta.japanese.stackexchange.com/questions/1556/…. – Martin R Apr 25 '16 at 1:01
  • Thanks for reporting. Fix is already in repo waiting for build. Should be live in < 24h. – Paweł Apr 25 '16 at 6:05
  • 6
    @Paweł you might want to get yourself a diamond on MSE because now your suggested edits go through the review queue where I was so kind to approve your edit. That is a bit weird if you consider that we could also choose to reject your edit ... – rene Apr 25 '16 at 12:35
5

Ok, so the problem was using flex indeed, but instead of replacing it with 'inline' we actually improved flex model a little bit. Why 'flex' instead of 'inline'? It is more flexible for what we need and it's easier to align elements. For example, single line questions are aligned vertically in the middle comparing to votes number on the left. This wouldn't be easily possible with 'display: inline'.

That being said, I consider this as . Again, thanks for reporting.

  • 2
    This is still not fully correct (see the update to my answer that includes illustrations of the remaining problems). Note also that I didn't suggest using display:inline (that was someone from the Japanese site). I suggested putting the contents of the link into a span nested in link so that the <a> node only has one child. See my post. – Davide Cervone Apr 25 '16 at 13:13
7

The issue appears to be that the page's CSS causes the links in the sidebar to be display: flex, and that changes how the children are treated. The content is no longer a paragraph-like structure that wraps normally. Instead, it is a series of boxes that align left to right. That means that the text before a math item is one box, the math is another, and the text that follows is a third. By default, these must appear all on one line, so the initial text is wrapped, as is the final text, and the math is smashed in between. Since these three boxes don't fit in the allowed horizontal space, the three boxes overlap, as in your diagram.

I'm not sure when the change to the CSS occurred, nor what the purpose of it is. It seems that it might simply be to allow the question title to be centered relative to the score on to its left.

I suspect that a fix would be to put the contents of the <a> element into a <span> so that there is only one child of the flex container (whose content will wrap normally).

UPDATE: While the addition of flex-flow: row wrap has improved the situation, it is still not fully correct. In particular, the spaces to the left and right of math are being lost (they are still in the text nodes, but are removed by the browser because those nodes are now children of a flex box). Here is an example:

spacing problem

while the correct rendering should be

spacing problem

(note the spaces around the mathematics).

In addition, the current CSS can also cause alignment issues. For example:

spacing problem

rather than the correct

spacing problem

because all the children are centered (rather than aligned on their baselines).

I do not think you will be able to fix these problems using CSS alone (as long as you require display: flex). Instead, as I suggested above, if you add a <span> inside the <a> so that the anchor has only one child, then you should get normal-paragraph flow within the <span>, while still being able to center the results as you desire. So the DOM would look like

<a ...>
  <span>
    ... current contents of link ...
  </span>
</a>
  • 1
    damn, looks like math titles are more complex than I thought they are. sory for those issue. I'm already working on fixing this. – Paweł Apr 25 '16 at 13:35
  • Thanks! We appreciate the fast response! – Davide Cervone Apr 25 '16 at 14:50
  • @Paweł yeah thanks, it's looking great now! – cypher Apr 25 '16 at 23:02
  • 1
    So it looks like the final solution was to use display:inline-block with some top margin so that the first line of the link will be aligned with the number to the left. – Davide Cervone Apr 26 '16 at 16:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .