Forum:Bad print layout

Forums: Index > Wiki discussion > Bad print layout

Bad print layout

This is how articles from this wiki look like when printed out. As you can see, everything on the right side of a page below a certain line is not displayed - meaning text and images can be cut off in the middle of a word.

Oddly enough, this only happens on the first page that is printed out. Subsequent pages are displayed normally, as you can see in the attached screenshots.

I think this issue is a serious one since it effectively makes printing articles pointless. (at least serious for me - I'm quite an old-fashioned man despite my relatively young age, so I like to read webpages only after I print them out)

I am out of ideas what causes this issue and how to fix this. When I try to display an article with an emulated `print` media type (In Firefox: Shift+F2 to bring Developer Tools, then type `media emulate print`) this issue is not present: it only happens in the Print Preview and in the actual print. Also removing all HTML nodes but <article id="WikiaMainContent" class="WikiaMainContent"> from the F12 Developer Tools > Inspector still does not fix the printing.

Other wikias, like mlpfanart.wikia.com, do not seem to have this issue.

So far, I've tested and confirmed this issue to happen under Firefox 48.0 in Linux Mint 17.3. Testing under Windows in a sec.

Any ideas, anyone?

Edit: Windows 10: Firefox 48.0 issue ofc present :( Edge and IE, however, don't have this issue. Is this a Firefox specific issue, or what?

Cheers, Marcgalrespons 22:30, August 14, 2016 (UTC) 22:26, August 14, 2016 (UTC)

Maybe part of the wiki layout was unprintable, or maybe your printer got the problem, or maybe some browsers were not compatible with your computer? I don't know... http://orig05.deviantart.net/8f03/f/2014/033/8/e/masked_matterhorn_flying_by_botchan_mlp-d74u0b3.gifChoongie  ^talk  22:43, August 14, 2016 (UTC)

Not unprintable, 'cause Microsoft Edge and Internet Explorer print fine, not my printer 'cause the issues are present even in the browser's print preview, and not my computer 'cause I tested this on two computers... I'd say probably it is the issue of this wiki vs Firefox, but some1 else would have to check if they have same issues with their Firefox Marcgalrespons 08:48, August 15, 2016 (UTC)

You should report this bug to Wikia - they have more control over print layout than we do. If they get back to you saying it's an issue with our templates or something, I'll take a deeper look, but any insight they have would be helpful. For the record, I have an older version of Firefox (28) on Windows and it has a similar issue, except it doesn't show the infobox at all, just the blue background color on the right side. Also, if you read a lot of webpages, you should consider wasting less paper. ~Bobogoobo (talk) 20:42, August 16, 2016 (UTC)

Wikia's response: I honestly don't know, either. If it's only happening on MLP, I have to guess that it's a CSS problem, but I can't figure out where that line of code is. This issue seems to be a hard nut... :( Marcgalrespons 17:46, September 1, 2016 (UTC)

This should make it easier: turning off the background image seems to fix it for me. We do have a bit of custom CSS on the background to anchor it to the bottom of the page, but turning these off and not the background doesn't fix the problem. Perhaps there is an issue with Wikia's printing rules? ~Bobogoobo (talk) 01:21, September 2, 2016 (UTC)

Thank you man, you really helped me. However, there are still some issues remaining :( The bottom bar (#WikiaBar) and the top bar (#globalNavigation) may still block out content. Adding rules: #WikiaBar {display: none;} #globalNavigation {display: none;} seems to solve these problems. Would it be problematic to add these rules to the appropriate CSS sheets? (Ofc these rules are only to be used for printing) Marcgalrespons 19:17, September 12, 2016 (UTC)

Also, since the background image isn’t intended to be shown in printing anyway, perhaps removing the background from the printing CSS altogether would be an acceptable solution? Or at least maybe add the rule body::before, body::after {background-image: none !important;}, again only to the CSS that is intended to be used for printing? Marcgalrespons 19:40, September 12, 2016 (UTC)

Those rules definitely make sense. Since they apply to all wikis, it would be better for Wikia to add them to their global CSS. You could reply to your support ticket suggesting that. In the meantime, you can add the rules to your CSS (local wiki) or your global CSS. ~Bobogoobo (talk) 00:29, September 14, 2016 (UTC)

These rules finally make printing somewhat functioning, I’ve emailed some of them to Wikia, we’ll see what happens. However... this is still not everything ;( Images seem to be loaded lazily, only when they actually are scrolled to. This means they aren’t printed out at all if I hadn’t have scrolled to the bottom of the page before printing. There must be some way to programmatically force them to load... EDIT: ...and I suppose this isn’t going to work, even if it succeeded loading all images, even though for some reason unknown to me it doesn’t. EDIT2: Reporting this bug to Wikia as well. Marcgalrespons 13:27, September 16, 2016 (UTC)

I highly recommend printing in "Reader View" or its equivalent in Chrome, Safari, Edge, Opera, and so on. It strips away all the images and some of the formatting, but makes for excellent text layout. Throwy 12:33, October 7, 2016 (UTC)