I noticed that while Minerva handles long words on small screens fairly well by using word-wrap: break-word; on the page content, the use of white-space: nowrap; (eg through Template:Nowrap or similar templates) still poses a problem: a line with a nowrap will simply be cut off if there is an overflow. This should not happen, as information might get lost for users of a small mobile device. Since word-wrap, hyphens etc. do not work within a nowrap, the only solution I currently see is to force everything to white-space: normal; on small screens. I also noticed that apparently the (iOS) app is able to handle Nowraps in the preview of references (not in the main body of text), but I am not sure whether that is done by simply setting its content to white-space: normal; or through some other magic. Could something like this be implemented for Minerva or are there other solutions that are being worked on?
Description
Event Timeline
Could you provide some screenshots and test URLs showing the broken state? I'm not 100% sure what this is referring to without.
Is this a bug with the ios app, mobile web, or both?
It’s not really a bug, as it is to be expected that a nowrap will cause overflow. But since mobile web and the app hide overflow, it needs to be forced to wrap. In the four screenshots I show lines with nowrap (the page numbers in footnotes 268 and 271; it’s part of the citation templates on dewiki); only the reference preview in the iOS app manages to wrap the line.
I don't really see this as a problem for MediaWiki, it's a local wiki problem.
Since word-wrap, hyphens etc. do not work within a nowrap
Well it can't do both. Wikipedia editors use this all over the place where they want to avoid linebreaks in things with spaces or hyphens, so they shouldn't be surprised if that is exactly what it does.
It is a MediaWiki problem as long as it is not handled consistently between Desktop, Mobile Web and App; how should editors be able to keep all of these in mind? Plus most editors I know (so-called power users) don’t care about the mobile experience at all, while most readers are on mobile.
As stated above, if overflow is hidden (which is not the case on desktop and this not expected by users), nowraps should be ignored, just like for references in the app, otherwise information will potentially be hidden for readers without editors even noticing.
The problem is that this is an inline style, purposefully inserted by editors (part of the freedom of editors). overriding it is difficult, esp. doing so without other unintentional sideeffects. Instead of using inlinestyles, the editors should be using template styles.
The only way i can think of to fix this is:
.content * {
white-space: initial !important;
}But this would make sure that it never worked anywhere any longer. Which seems over the top to me, there might be places where we really need it.
Instead, petition the template to convert this to use template styles + classes, and then only apply the nowrap when the viewport is larger than say 320px.