Hi all, Just wondering whether anyone has considered the way MediaWiki renders when the browser is particularly wide. Many blogs fix a maximum column width, because it gets increasingly harder to read as the line length increases.
Perhaps MediaWiki could do something like this, and use the extra space that would be left to solve its infobox crisis. In fact, many layout issues would be completely solved by having a column purely dedicated to text, with no possible interference from images, tables, contents etc. If the browser is narrow, then it could condense to something like its current format.
Any thoughts? Someone want to do a mock-up?
Steve
On Thu, Sep 27, 2007 at 04:57:01PM +1000, Steve Bennett wrote:
Hi all, Just wondering whether anyone has considered the way MediaWiki renders when the browser is particularly wide. Many blogs fix a maximum column width, because it gets increasingly harder to read as the line length increases.
If the line is too long for you to read it easily, just make your browser window smaller. The problem with most blogs is that they don't have a maximum column width, but a fixed one - making it really hard to read the page with small screen sizes.
Regards,
JeLuF
On 9/27/07, Jens Frank jf@mormo.org wrote:
If the line is too long for you to read it easily, just make your browser window smaller. The problem with most blogs is that they don't have a maximum column width, but a fixed one - making it really hard to read the page with small screen sizes.
Ok, apparently I wasn't sufficiently clear. I'm not asking for suggestions to improve my experience with MediaWiki - I'm wondering how we can improve MediaWiki for end-users in general.
Also, rather than making the browser itself narrow, I'm suggesting that we can take advantage of the extra width to improve layout, but without increasing linelength.
Here's some ASCII art (it was only a matter of time):
MW | Top links........... Logo | Contents | Title Links | Contents | Text text text text text | Image Links | Contents | Text text text text text | Image Links | Contents | Text text text text text | Links | Contents | | Infobox Links | Contents | Section 1 | Infobox Links | Contents | Text text text text text | Infobox Links | Contents | Text text text text text | Infobox Links | | Text text text text text | Infobox Links | | Text text text text text Links | | Text text text text text Links | | Text text text text text Links | | Text text text text text Links | | Text text text text text Links | | Text text text text text Links | | Text text text text text Links | | Text text text text text
See how now the text is totally unencumbered by contents and infobox? So we're actually benefiting from the extra browser width, rather than it being a nuisance.
Steve
On 28/09/2007, Steve Bennett stevagewp@gmail.com wrote:
On 9/27/07, Jens Frank jf@mormo.org wrote:
If the line is too long for you to read it easily, just make your browser window smaller. The problem with most blogs is that they don't have a maximum column width, but a fixed one - making it really hard to read the page with small screen sizes.
Ok, apparently I wasn't sufficiently clear. I'm not asking for suggestions to improve my experience with MediaWiki - I'm wondering how we can improve MediaWiki for end-users in general.
I have absolutely no idea whether this is technically possible, but ideally all formatting would be related to font size. Presumably the user sets the font to a comfortable size for them, that tells you how good or bad their eyes are, and so you would want to scale up all images proportionately.
Steve
On 9/28/07, Ian Woollard ian.woollard@gmail.com wrote:
I have absolutely no idea whether this is technically possible, but ideally all formatting would be related to font size. Presumably the user sets the font to a comfortable size for them, that tells you how good or bad their eyes are, and so you would want to scale up all images proportionately.
As far as I know, the image size is always provided to the browser in pixels but I do know that browsers will behave differently when resizing a document that contains images. When I hold down "ctrl" and roll the wheel in the middle of the mouse to zoom in or out, it will make the text appear larger or smaller, but in some browsers (such as Opera, but not Firefox) it will also scale the images.
There might be a practical reason we would want to force the size of an image to remain proportionate to the text, like if we are displaying images (non-unicode symbols...) mid-paragraph, as part of a sentence. Egyptian hieroglyphics would be one example, but I don't foresee a reliable hack for something like that.
—C.W.
On 9/28/07, Steve Bennett stevagewp@gmail.com wrote:
On 9/27/07, Jens Frank jf@mormo.org wrote:
If the line is too long for you to read it easily, just make your browser window smaller. The problem with most blogs is that they don't have a maximum column width, but a fixed one - making it really hard to read the page with small screen sizes.
Ok, apparently I wasn't sufficiently clear. I'm not asking for suggestions to improve my experience with MediaWiki - I'm wondering how we can improve MediaWiki for end-users in general.
Also, rather than making the browser itself narrow, I'm suggesting that we can take advantage of the extra width to improve layout, but without increasing linelength.
Try this: #content { width:1024px; } div.tright { position:absolute;margin-left:100%; z-index:1}
Replace "1024" with whatever px/em you want. Note that large right-floating thumbnails might extend outside the visible screen.
Magnus
On 9/28/07, Magnus Manske magnusmanske@googlemail.com wrote:
On 9/28/07, Steve Bennett stevagewp@gmail.com wrote:
On 9/27/07, Jens Frank jf@mormo.org wrote:
If the line is too long for you to read it easily, just make your browser window smaller. The problem with most blogs is that they don't have a maximum column width, but a fixed one - making it really hard to read the page with small screen sizes.
Ok, apparently I wasn't sufficiently clear. I'm not asking for suggestions to improve my experience with MediaWiki - I'm wondering how we can improve MediaWiki for end-users in general.
Also, rather than making the browser itself narrow, I'm suggesting that we can take advantage of the extra width to improve layout, but without increasing linelength.
Try this: #content { width:1024px; } div.tright { position:absolute;margin-left:100%; z-index:1}
Replace "1024" with whatever px/em you want. Note that large right-floating thumbnails might extend outside the visible screen.
You can add table.infobox { position:absolute; margin-left:102%; z-index:1}
to have infoboxes floating outside the text as well.
Magnus
On 9/28/07, Magnus Manske magnusmanske@googlemail.com wrote:
On 9/28/07, Steve Bennett stevagewp@gmail.com wrote:
On 9/27/07, Jens Frank jf@mormo.org wrote:
If the line is too long for you to read it easily, just make your browser window smaller. The problem with most blogs is that they don't have a maximum column width, but a fixed one - making it really hard to read the page with small screen sizes.
Ok, apparently I wasn't sufficiently clear. I'm not asking for suggestions to improve my experience with MediaWiki - I'm wondering how we can improve MediaWiki for end-users in general.
Also, rather than making the browser itself narrow, I'm suggesting that we can take advantage of the extra width to improve layout, but without increasing linelength.
Try this: #content { width:1024px; } div.tright { position:absolute;margin-left:100%; z-index:1}
Replace "1024" with whatever px/em you want. Note that large right-floating thumbnails might extend outside the visible screen.
That almost works, but at least in Classic, two images with close vertical spacing will end up overlapping.
On 9/28/07, Steve Bennett stevagewp@gmail.com wrote:
Here's some ASCII art (it was only a matter of time):
MW | Top links........... Logo | Contents | Title Links | Contents | Text text text text text | Image Links | Contents | Text text text text text | Image Links | Contents | Text text text text text | Links | Contents | | Infobox Links | Contents | Section 1 | Infobox Links | Contents | Text text text text text | Infobox Links | Contents | Text text text text text | Infobox Links | | Text text text text text | Infobox Links | | Text text text text text etc.
See how now the text is totally unencumbered by contents and infobox? So we're actually benefiting from the extra browser width, rather than it being a nuisance.
Maybe I'm not seeing how this is much different than the effect of {{TOCleft}}. I did notice that the "documentation" and the talk page of that template allege that there is some way to do the same thing automatically with CSS, but nobody really explains how.
—C.W.
On 9/27/07, Steve Bennett stevagewp@gmail.com wrote:
Hi all, Just wondering whether anyone has considered the way MediaWiki renders when the browser is particularly wide. Many blogs fix a maximum column width, because it gets increasingly harder to read as the line length increases.
Perhaps MediaWiki could do something like this, and use the extra space that would be left to solve its infobox crisis. In fact, many layout issues would be completely solved by having a column purely dedicated to text, with no possible interference from images, tables, contents etc. If the browser is narrow, then it could condense to something like its current format.
Any thoughts? Someone want to do a mock-up?
I had a CSS hack somewhere to display wikipedia pages in two columns on my 23'' widescreen TFT at work. Didn't really work out in terms of readability, though.
To set the maximum width for the content, put html { width:1280px; margin-left:auto; margin-right:auto } in your monobook.css (adapt "1280px" to the width you like)
Magnus
On 9/27/07, Magnus Manske magnusmanske@googlemail.com wrote:
On 9/27/07, Steve Bennett stevagewp@gmail.com wrote:
Hi all, Just wondering whether anyone has considered the way MediaWiki renders when the browser is particularly wide. Many blogs fix a maximum column width, because it gets increasingly harder to read as the line length increases.
Perhaps MediaWiki could do something like this, and use the extra space that would be left to solve its infobox crisis. In fact, many layout issues would be completely solved by having a column purely dedicated to text, with no possible interference from images, tables, contents etc. If the browser is narrow, then it could condense to something like its current format.
Any thoughts? Someone want to do a mock-up?
I had a CSS hack somewhere to display wikipedia pages in two columns on my 23'' widescreen TFT at work. Didn't really work out in terms of readability, though.
To set the maximum width for the content, put html { width:1280px; margin-left:auto; margin-right:auto } in your monobook.css (adapt "1280px" to the width you like)
Magnus
That would be html { max-width:1280px; margin-left:auto; margin-right:auto } to keep it working normally on smaller screens, sorry.
Magnus