bad print layout due to HTML main element in one website

[Nick_Levinson]

The layout for printing is defective if the HTML main element is present, but browser display is fine either way. Even printing is okay in one browser but not in another and both are well known. The basic layout is 3 columns plus header and footer. The print fault is that the middle column's text overlaps past the right column and the middle-column text's right edge is so far that most lines get cut off so text won't all be printed. I tried setting CSS to "display: block" and setting the ARIA role to main, presentation, none, and 4 combinations thereof and no set role (the role main is the default and desired so it should not be set). A div element includes the main element but also includes more that has no problem, so the div is not at fault. The only fix I've been successful with is commenting the main tags out, but I'd rather have the tags, because I think they help accessibility for people with disabilities. The problem is probably true of the whole website but not of any other website of mine, all of which are based, with variations, on the same template of mine. Suggestions, please? Thank you.

 

[Marc van Leeuwen]

Can you send codes or screenshots where are the problems and how you want to fix it? It is hard to imagine to help you by reading your explanation via words.

 

[Rob Whisonant]

In the browser that is printing wrong... Check the printer margins. Set them smaller and see what happens.

 

[Nick_Levinson]

Hopefully I can submit snapshot.png as an attachment with this reply. You can see that the article's headline is truncated on the right even though it's wrapped; "Honoring Living People" is truncated into "Honoring Li People" ("People" is wrapped to the next line).

Margins either can't be set (which surprised me but they can't in one well known but somewhat outdated browser) or, in another well-known browser, don't make much difference.

I applied a kludge in that I commented out the "main" tags on the whole site, so visiting the site live likely won't show the problem.

I'd like to decomment the main tags, because they support accessibility, but decommenting requires some solution other than my kludge. The source code is visible.

 

[Rob Whisonant]

Exactly what browser are you having the problem with?

 

[Nick_Levinson]

I doubt it matters, since I want most people to have the proper experience, but the complaint came from someone who seems not to be a geek, so is likely using whichever browser comes with Windows these days, and I had the problem with Firefox 47.0 (kind of old). Google Chrome is okay but I don't want to ask everyone to install that. By the time I tried FF 52.2.0 and IE 11, I had already put my kludges into my HTML.

 

[Rob Whisonant]

Rob Whisonant

So it's really a page that the user needs to print out? If that's the case, don't use HTML. Create a PDF for them to download and print out.

 

[Nick_Levinson]

No, I need HTML.

A PDF solution is too geeky for the individual case and way too geeky as a general solution. People use browsers and give Print commands and expect something they can read in full. Most people don't have the confidence to try more complicated methods. And I don't want to be creating a PDF every time I create new content or revise it in addition to creating the HTML pages so people can see them after Googling for what they're interested in (which I hope is my content). And all of my websites are in HTML (with a little PDF content for scans) but this problem is occurring with only this website. Plus I want accessibility, which the "main" element is supposed to support.

Any ideas? Thanks.

 

[Rob Whisonant]

Rob Whisonant

In that case..... Redisign the site so it works the way you want. You already know your current design is not going to work the way YOU want. So scrap it and start over with a different design and layout.

If you have a site that works fine.... Mimic it.

Did you check the HTML to make sure it is 100% valid? No missing div tags or closing tags etc??? Run the page through a HTML validator and see if it shows any problems. Also make sure ALL HTML you are using is valid for all browsers. Not all browsers support all of HTML. Or support it in their own way.

 

[Nick_Levinson]

Total redesign is overkill. Three sites work fine. All four sites came from the same template, which I made and update. A whole new layout would mean rethinking a lot of issues, mainly user experience, in order to shun the old way, which mostly works even on this site, but not knowing where this problem is originating (except it surely seems to be the "main" element) would mean spending months that I'd rather use for other things, like creating content and getting more visitors.

I did mimic. This site is the third; it mimicked the second, which was fine. The fourth site mimicked this one; the fourth is fine. But each mimic is in some ways different, mostly because I learn things or make improvements that I don't always apply retroactively (sometimes I do). Redoing this site by mimicking the fourth backwards would be a huge undertaking, likely costing months.

I have done validation, including checking for stray tags (I sometimes copy the open tag id/class value into a comment next to the matching end tag to check for strays.)

I don't think it's possible to check that all HTML and associated languages (e.g., PLS) are fully and properly implemented in all browsers, although a few websites try to support that possibility such as by listing compliant browsers according to feature. If MS IE is noncompliant, and IE is infamous for that, doing only what IE is compliant for likely means writing a rather bad website (many designers use hacks and kludges, which get messy quickly). My problem arose with a recent version of Firefox and FF has long had a good reputation for compliance with specs like HTML. I read and use the specs for HTML and some other languages hosted at w3.org although one could legitimately use the HTML Living Standard spec (I don't).

I can believe that I've made a mistake that's stupid, and maybe if and when I discover it I'll send myself to bed without dinner. But I want to discover it and eat breakfast the next day.

Better to find a narrow solution with respect to the HTML "main" tags or whatever is causing the problem. What should I try next? Thanks.

 

[Rob Whisonant]

Rob Whisonant

This can't be helped without more information. It's like blind leading the blind.

1. Provide the HTML page that is having issues.

2. Provide the exact steps to recreate the problem.

3. Provide the HTML to the page you used as a template that does not create the problem.

 

[Nick_Levinson]

I can't supply the page URL with the printing problem, since I already made a kludgy repair (commenting the main tags out) and that made the printing problem go away, but the kludge gives me an accessibility problem and I don't know how to demonstrate that except to say that I'm not following the HTML spec on that point (I'm supposed to have the main element but I effectively don't). I also don't want to revert the kludgy repair just for a demonstration, because other visitors might come across it at the same time. The printing problem used to be at this site (Webmaster Sun says I can't post links basically because I'm new): for the domain type the word "law" then the word "slip" then a dot and a com, go to Humorous, and go to A Postage Stamp on the Constitution Accidentally Honoring Living People.

Back when the printing problem could be reproduced, here were the steps: 1. Open the page in your browser. 2. Give the Print Preview command (or perhaps simply Print). 3. Observe that the main text, which occupies the middle column below the page header and above the page footer, overflows the entire width of the right-hand column and tries to go farther than the right edge of the viewport (here the printable area on the paper), so that, on most lines, text gets truncated on the right, meaning that a fraction of the article text is missing altogether and the overlap with the right-hand column makes reading of either column harder. 4. You can try changing page margins, etc., but the goal is to have it work in the commonest way so that ordinary non-geek users can get a readable printout.

The template is a separate offline file of mine but the preceding website made from the same template has the domain formed from the word "slash" followed by the word "sleep" followed by a dot and a com.

 

[Rob Whisonant]

I see what you are talking about when using Firefox. The middle column is just way to wide for the page. If I click shrink to fit page it prints fine. If other pages work, then it's an element on the page that is causing the problem.

Try removing all elements and adding them back one at a time.

Possibly try something like...

<style type="text/css" media="print">
body {
zoom:75%; /*or whatever percentage you need, play around with this number*/
}
</style>

 

[Nick_Levinson]

Interesting; for me, Firefox defaults to Shrink to Fit and has the problem anyway (using an offsite page that has the "main" tags active), even if I go away from Shrink to Fit and back again. I also validated; nothing there explains this. The problem was likely with all of the pages at that site although not with my other 3 sites. But I like the CSS idea and plan to try something like it (I use *.css files) soon.

 

[Rob Whisonant]

Rob Whisonant

I believe Firefox saves the last state of the shrink to fit checkbox. So once you check the shrink to fit box, it stays that way until you un-check it.

 

[Nick_Levinson]

Menu on mine but I should upgrade soon anyway and you're likely right about last-state storage. I should get to the CSS this weekend, I hope. Thanks.

 

[Rob Whisonant]

Rob Whisonant

I'm using Firefox Quantum 59.0.3

 

[Nick_Levinson]

I think I solved it. This is tentative; it may be a while before I take the time to put into fixing and testing it (and maybe I'm wrong and will have to roll my changes back and try again).

It wasn't about zoom anywhere in CSS. Two problems were present.

One was that I had CSS for main with display as block for this website and not for the other 3 websites and that coincided with the problem occurring with this website and not with the other 3 websites. I don't remember why I set display as block in the first place, likely when the site went live long ago. I think I can take the setting out.

The other problem is that for the @media rule for print I had set CSS for main with width at 1300px but 600px works. That's puzzling because for other websites 1300px is my setting and it seems to work and all of the websites use 3-column layouts at those horizons of the page. But maybe I get to use the main element again and I can live with 600px for this site.

I haven't decommented the main element, the website having a great many pages and all would need that editing, but I think I'm on the right track now.

Firefox: I upgraded past your version and I still have a menu, not a checkbox, for Shrink To Fit. But I'm looking at what I guess is a toolbar (File > Print Preview > toolbar (?) > Scale menu > Shrink To Fit) while you probably were using the Print dialog that's inside Print Preview (File > Print Preview > toolbar (?) > Print > Options tab > Print Frames > Ignore Scaling and Shrink To Fit Page Width checkbox). (FF version 60.0.2 (64-bit) fedora - 1.0 (Quantum) (upgraded since).) I don't program frames, which are deprecated.

Thanks.