Bug 91539
| Summary: | FreeBSD web site renders very badly | ||
|---|---|---|---|
| Product: | Documentation | Reporter: | Greg Lehey <grog> |
| Component: | Website | Assignee: | freebsd-doc (Nobody) <doc> |
| Status: | Closed Overcome By Events | ||
| Severity: | Affects Only Me | CC: | bcr, grog, jamie, tablosazi.farahan |
| Priority: | Normal | ||
| Version: | Latest | ||
| Hardware: | Any | ||
| OS: | Any | ||
|
Description
Greg Lehey
2006-01-09 01:00:18 UTC
I'm translating the webpage to Hungarian and experiencing rendering issues, too. Not only the test sizes and line spaces, but the pictures and style sheets are rendered in a very weird way. See: http://tux.t-hosting.hu/webpage_hu.jpg I use Firefox 1.5.0.1 with default settings. If I disable JavaScript everything become fine. This proves that my (halfway) translated webpage is fine, not my fault is that caused this error. On www@ list I got an affirmation, that my translated webpage works with JavaScript disabled. We suspect, that the problem is caused by the JavaScript based style sheet switcher together with the character encoding. (Encoding is iso-8859-2, defined explicitly in includes and in index.xsl. There's no other way to display Hungarian characters correctly.) Gabor Kovesdan Hi Greg. I just noticed your page "http://www.lemis.com/grog/Photos-20060109.html" and hence the associated bug report. I too have experienced similar problems using Konqueror/KDE, or anything.. The problem is that the css has this: width: 765px; The whole site is forced into a 765 pixel wide box, which is then centred to the screen. The problem you are then seeing is due to the fixed-width 'pre' font used to show bug reports and emails etc. then overflowing that box. As suggested in the bug report, the font size could be reduced, or the pre-text force-wrapped (I don't like this idea) but of course, the situation is made worse simply by the fixed width box. Seeing sites using fixed widths like this really annoys me - but then I don't visit them again -- seeing it being introduced to the FreeBSD site was really depressing. As is probably typical of users of this site, I run with a high screen resolution -- 1600 x 1200 .. Whilst I don't always have the browser full screen, I do when reading certain things - like the cvsweb or some bug reports, and the small size is annoying. Anyway, as a first start, I propose a simple change to the css along these lines: --- layout.diff begins here --- --- /usr/thompson/share/www.freebsd.org/data/layout/css/layout.css Wed Nov 23 18:08:50 2005 +++ FREEBSD-WEB-SITE-layout.css.layout.css Sat Dec 31 03:06:41 2005 @@ -14,8 +14,8 @@ #CONTAINER, #container { margin: 0em auto; - width: 765px; - padding: 0; + padding-left: 20px; + padding-right: 20px; padding-top: 0px; padding-bottom: 15px; text-align: left; /* Win IE5 */ --- layout.diff ends here --- This simple change allows the page to wrap to the browsers width... Some pages (like the front page) which have other elements written assuming that fixed width would still need a bit more juggling with, but others are instantly improved. As for CVSweb and the PR database, these are not perfect, but are also improved, in my opinion. To demonstrate, I've put a mirror of the website, with the above modified CSS at http://www.freebsd.org.mirrors.bishopston.net/ Compare these for instance, and note the difference with a window width bigger than 1024 pixels, and note how even if your window width is 800 pixels, the two look the same -- best of both worlds as far as I can see: http://www.freebsd.org.mirrors.bishopston.net/cgi/query-pr.cgi?pr=91536 http://www.freebsd.org.mirrors.bishopston.net/cgi/query-pr.cgi?pr=ports/93619 http://www.freebsd.org.mirrors.bishopston.net/cgi/cvsweb.cgi/CVSROOT-src/ http://www.freebsd.org.mirrors.bishopston.net/cgi/cvsweb.cgi/CVSROOT-src/access.doc_src http://www.freebsd.org.mirrors.bishopston.net/releases/ http://www.freebsd.org.mirrors.bishopston.net/news/newsflash.html http://www.freebsd.org.mirrors.bishopston.net/about.html http://www.freebsd.org/cgi/query-pr.cgi?pr=91536 http://www.freebsd.org/cgi/query-pr.cgi?pr=ports/93619 http://www.freebsd.org/cgi/cvsweb.cgi/CVSROOT-src/ http://www.freebsd.org/cgi/cvsweb.cgi/CVSROOT-src/access.doc_src http://www.freebsd.org/releases/ http://www.freebsd.org/news/newsflash.html http://www.freebsd.org/about.html And finally, some screenshosts of the above, as seen from my setup: http://www.jamiejones.com/misc/freebsd-website-snapshots/about_current.png http://www.jamiejones.com/misc/freebsd-website-snapshots/about_new.png http://www.jamiejones.com/misc/freebsd-website-snapshots/cvsweb_file_current.png http://www.jamiejones.com/misc/freebsd-website-snapshots/cvsweb_file_new.png http://www.jamiejones.com/misc/freebsd-website-snapshots/cvsweb_folder_current.png http://www.jamiejones.com/misc/freebsd-website-snapshots/cvsweb_folder_new.png http://www.jamiejones.com/misc/freebsd-website-snapshots/query_pr-93619_current.png http://www.jamiejones.com/misc/freebsd-website-snapshots/query_pr-93619_new.png http://www.jamiejones.com/misc/freebsd-website-snapshots/releases_current.png http://www.jamiejones.com/misc/freebsd-website-snapshots/releases_new.png Cheers, Jamie -- -=-=-=- Virus Scanned by "pacha.mail.bishopston.net" using ClamAv -=-=-=- Database Last Checked: Sat Mar 4 00:38:00 GMT 2006 - http://www.clamav.net/ Database Updated : Fri Mar 3 16:38:01 GMT 2006 - 45768 viruses scanned Appending relevant text from www/97154 to the audit trail... : Message-Id: <200605112305.k4BN5bA0087399@www.freebsd.org> : Date: Thu, 11 May 2006 23:05:37 GMT : From: niek dekker <niekdekker@gmail.com> : To: freebsd-gnats-submit@FreeBSD.org : Subject: www/97154: freebsd.org doesn't display well in Firefox 1.5.0.3 : : >Number: 97154 : >Category: www : >Synopsis: freebsd.org doesn't display well in Firefox 1.5.0.3 : [...] : >Description: : : The new freebsd website displays faulty in Firefox current : (1.5.0.3). Really a shame for an open source operating system! : : >How-To-Repeat: : Open freebsd.org in a current version of Firefox : >Fix: : Make website cross-browser compatible : From: Martin <nakal@nurfuerspam.de> : To: bug-followup@FreeBSD.org, niekdekker@gmail.com : Subject: www/97154: Re: www/97154: freebsd.org doesn't display well in Firefox 1.5.0.3 : Date: Thu, 08 Jun 2006 18:18:00 +0200 : : Yes, it looks somehow weird. : : I hope this link works for you: : http://gallery.bsdforen.de/albums/userpics/12094/freebsd-org.png : : Please take a look at the menu bar, the font-size selection links : and the security advisories. : : Martin State Changed From-To: open->suspended I tried the proposed change of changing the width's and borders, and it looks fine except for the frontpage. Since all of these things might need more fiddling, I think this will not be resolved anytime soon. I'll mark the ticket as suspended till someone can properly sort this out. Or if Emily is watching, please help us to resolve the reported problems. Responsible Changed From-To: freebsd-www->gjb 5 years and 9 months later... I'll take this. State Changed From-To: suspended->open A patch has been sent to www@ for review: http://markmail.org/message/4hwh4ruba7qvjafv gjb@FreeBSD.org wrote: > 5 years and 9 months later... > > I'll take this. Good luck with that, Glen. I had a quick look at your patch and I agree that it would be an improvement. The page still doesn't scale with the browser size, though. I also can't see how the patch would help with the broken rendering of the PR pages and the documentation so the patch wouldn't be sufficient to close this PR as solved. My workaround for the layout issues that affected me is the following Privoxy filter: FILTER: freebsd.org Hides some design bugs that show up if you are using slightly different browser settings than the "designer". s@</head>@<style type="text/css">\n\ /* Style sheet inserted by Privoxy's freebsd.org filter */\n\ body {width: auto; font-size: 100%; min-font-size: 0.8em /*CSS3*/}\n\ /* Lots of braindead margings that try to\n\ * shift the content out of the viewport.\n\ * This width works for me, but as the margins\n\ * scale with the font-size, it's not a real solution\n\ * and the margins should be fixed instead */\n\ body.SECT1, body.ARTICLE {width: 80%}\n\ \#containerwrap, \#CONTAINERWRAP {width: auto;}\n\ \#headercontainer, \#HEADERCONTAINER {width: auto;\n\ /* Makes horizontal scrollbar for the PR pages less likely\n\ * but causes some white space if the TOPNAVLIST needs more\n\ * than one line */\n\ padding-right:0.3em}\n\ \#container, \#CONTAINER {width: auto;}\n\ \#contentwrap, \#CONTENTWRAP {padding-left: 0.5em;}\n\ \#TOPNAVLIST, \#topnavlist { background-color: \#eee; height: auto; opacity: 0.7; \n\ /* In case it doesn't fit on one line. Only tested in Firefox. \n\ * If it causes scrollbars, the browser is broken. */\n\ width: 100.5% }\n\ \#TOPNAV, \#topnav {width: auto;}\n\ \#TOPNAV ul, \#topnav ul {text-align: center;}\n\ \#SIDENAV, \#sidenav {padding-left: 0.1em; width: auto; clear:both;}\n\ /* Color doesn't match exactly, but at\n\ * least it keeps the search button text visible */\n\ \#SUBMIT, \#submit {background-color: \#7b0000 !important;}\n\ em, pre, tt {font-size: 1em; /* ridiculous */}\n\ .mfield, .replyblock {width: auto;}\n\ \#footer, \#FOOTER {width: auto; padding-left: 0.5em;}\n\ td .content {width:auto; overflow: visible}\n\ \#search, \#SEARCH, \#SEARCHNAV, \#seachnav {padding-right: 0.1em}\n\ \#SEARCHNAVLIST li:first-child, \#searchnavlist li:first-child {display: none; /* Broken links */}\n\ \#content, \#CONTENT {padding-left: 0.8em; padding-right: 0.8em; width: auto;}\n\ \#MIRRORSEL, \#mirrorsel, \#FRONTNEMSCONTAINER, \#frontnemscontainer {width: 100%;}\n</style>\n$0@i Maybe you find parts of it useful. It doesn't magically make the layout pretty and wouldn't be sufficient to close this PR as solved either, but at least all the pages (that I came across over the years) should be readable without vertical scrolling and overlapping text. Fabian Hi, On 10/18/11 3:52 PM, Fabian Keil wrote: > gjb@FreeBSD.org wrote: > >> 5 years and 9 months later... >> >> I'll take this. > > Good luck with that, Glen. > > I had a quick look at your patch and I agree that > it would be an improvement. The page still doesn't scale > with the browser size, though. > The goal here isn't to resolve issues with browser size. The page, with my patch, shouldn't scale - that isn't its intent. The goal is to resolve the formatting when the page is viewed with a non-default large font size. I see your concern, and I agree. But, this is stage one, and solely to focus on the initial concern in the PR. > I also can't see how the patch would help with the broken > rendering of the PR pages and the documentation so the patch > wouldn't be sufficient to close this PR as solved. > Again, that isn't the intent of this patch. Regards, Glen -- Glen Barber | gjb@FreeBSD.org FreeBSD Documentation Project gjb 2011-10-23 14:50:29 UTC
FreeBSD doc repository
Modified files:
en/layout/css layout.css navigation.css
Log:
CSS tweaks to fix formatting when viewed with large default font sizes
(up to 16pt font).
PR: 91539
Submitted by: Greg 'groggy' Lehey (grog%lemis @ com)
Reviewed by: remko
Output reviewed by: dougb, linimon, eadler
No objection from: silence on -www@
Revision Changes Path
1.13 +4 -4 www/en/layout/css/layout.css
1.8 +6 -3 www/en/layout/css/navigation.css
_______________________________________________
cvs-all@freebsd.org mailing list
http://lists.freebsd.org/mailman/listinfo/cvs-all
To unsubscribe, send any mail to "cvs-all-unsubscribe@freebsd.org"
State Changed From-To: open->patched 5 years and some months later, I've committed a fix for this. Change state to patched, since, though I believe the original problem may be effectively resolved, more work will need to be done to ensure proper scaling with browser size, as well. Maybe it's time we move away from static sizes in stylesheets... Hi, the website is still annoying, because the content in the middle is set to fixed size. Why doesn't it scale with the window width as suggested in the original PR? The website is made for 1100px, as I can see. If you go below, you get a horizontal scroll bar, even there is still enough of the annoying white border. If you have it in full width, you get more than 50% of your screen unused. I agree that it looks weird when the text begins directly at the left edge of the window. But it also looks weird when the content column has a fixed size. Take a look how the content column in forums.freebsd.org (vBulletin) reacts when resizing the browser window horizontally and compare it with the behavior on the main website. -- Martin With respect to PR www/91539: I mirror the sentiments of Martin Sugioarto... "I agree that it looks weird when the text begins directly at the left edge of the window. BUt it also looks weird when the content columns has a fixed size." To this day, I believe the website does not render in a manner that is both easy to digest and looks appropriate. Having text immediately at the left of the window: a. obscures the FreeBSD logo in the header b. makes me think that the page has been cut-off at the left c. continually makes me think text in commit messages has been truncated And having the table be a fixed-width is: a. more the original issue from the original submitter (whom wanted a larger area to work with because he was translating pages to Hungarian and running out of horizontal canvas in the table) b. not helping any of the other issues related to screen real-estate It is recommended that a happy medium be pursued, increasing the margin from -4% to -2% to: a. Un-obscure the FreeBSD logo, making the FreeBSD Foundation and other branding-concerned sects happy b. Make it easier on the eyes c. Make it more clear (by the injection of minimal whitespace) that the page is NOT truncated at the left side. The principal argument is, however, that the pages are harder to read with zero whitespace than with minimal whitespace. Minimal whitespace is defined as the least amount of whitespace required to make it clear that your page is not truncated at the left. Currently visually-aware web-page viewers are under the impression that the page is truncated because zero whitespace *AND* the truncated (partially visible) FreeBSD logo in the header. Increase the whitespace enough to make the FreeBSD logo fully visible and the readability should improve. Also, the table should be increased in width beyond 1100px to solve the OP's issue of not having enough horizontal canvas when working with Hungarian. -- Devin _____________ The information contained in this message is proprietary and/or confidential. If you are not the intended recipient, please: (i) delete the message and all copies; (ii) do not disclose, distribute or use the message in any manner; and (iii) notify the sender immediately. In addition, please be aware that any message addressed to our domain is subject to archiving and review by persons other than the intended recipient. Thank you. After further research, what causes certain CVSweb entries to display poorly (text rendered all the way to the left with zero-margin), in example: http://www.freebsd.org/cgi/cvsweb.cgi/ports/Mk/bsd.autotools.mk Are caused by _wide_ non-breaking lines in the commit message(s) which invariably force the expansion of the fixed-table (containing both the header/logo and containing the commit history data) beyond the normal 1100px width. If the margin were reduced from -4% to some higher value, these non-breaking lines would not cause fixed-table to be slammed against the edge of the window (thus far witnessed in both IE8 and IE9 on Windoze). It should be noted that the reason IE8 and IE9 are displaying poorly in-comparison to Firefox 12 and Chrome 18 is the fact that IE8/IE9 are not adhering to the fixed 1100px width for the header/container tables. Both Firefox and Chrome (on both FreeBSD and Windows) will force (despite long non-breaking lines) the table to be 1100px wide, meanwhile IE8 and IE9 expand beyond the desired fixed-width causing the margins to break. My co-worker's Chrome 18 and Firefox 12 display margines properly and centers the DIVs/Layers appropriately. Only IE8/IE9 appear to be "broken" w/respect to adhering to fixed-width table sizes in CSS. -- Devin _____________ The information contained in this message is proprietary and/or confidential. If you are not the intended recipient, please: (i) delete the message and all copies; (ii) do not disclose, distribute or use the message in any manner; and (iii) notify the sender immediately. In addition, please be aware that any message addressed to our domain is subject to archiving and review by persons other than the intended recipient. Thank you. Is the following version any better? I replaced most of the width and height specifications in px with values in percent or em so this should scale better. It renders fine for me but I did not experience the original problem so I have no idea if it really helps: http://kovesdan.org/wwwtest/data/ Thanks, Gabor (In reply to gabor from comment #14) > Is the following version any better? I replaced most of the width and > height specifications in px with values in percent or em so this should > scale better. It renders fine for me but I did not experience the > original problem so I have no idea if it really helps: > http://kovesdan.org/wwwtest/data/ > > Thanks, > Gabor Gabor, cheers for that (bugzilla has helped me stumble across this long forgotten PR) However, it looks the same to me..... Over 8 years later, my hair has got greyer, my wallet thinner, my original domain hijacked by domain squatters (when I didn't renew 'cos I was in hospital long term) and yet STILL all that unnecessary white space on the left and right! Cheers, Jamie Back to pool. Add to website component. Now that this PR has celebrated its 10th birthday, it's probably time to close it. There may still be problems with the site, but it has changed beyond recognition since I reported these issues. Greg MARKED AS SPAM |
