Bug 91539 - FreeBSD web site renders very badly
Summary: FreeBSD web site renders very badly
Status: Closed Overcome By Events
Alias: None
Product: Documentation
Classification: Unclassified
Component: Website (show other bugs)
Version: Latest
Hardware: Any Any
: Normal Affects Only Me
Assignee: FreeBSD doc mailing list
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2006-01-09 01:00 UTC by Greg Lehey
Modified: 2017-12-17 07:12 UTC (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Greg Lehey 2006-01-09 01:00:18 UTC
	The current web site renders very badly:

	- Text sizes are, in general, far too large.
	- Line spacing is too small for text (texts overlap).
	- Boxes are too small for text (text overflows).
	- Layout leaves far too large margins.  In the default case,
	  up to 40% of the page is left margin, and the text scrolls
	  off beyond the right margin.
	- PR pages (including, presumably, this one) are in ridiculously large text.

	The overall impression is very negative, particularly in
	comparison with other BSD project web sites.  As a result, I'm
	categorizing this PR as "critical" and "high priority".

Fix: 

Removing font size specifics from the CSS style sheets might
	be a start.  Also remove margin specifications unless
	absolutely necessary.
How-To-Repeat: 
	Using firefox, view:

	http://www.freebsd.org/
	http://www.netbsd.org/
	http://www.openbsd.org/
	http://www.freebsd.org/cgi/query-pr.cgi?pr=91536

	Compare the results with
	http://www.lemis.com/grog/Photos-20060109.html .  If they're
	not the same, this may help explain the problem.
Comment 1 Gabor Kovesdan 2006-02-26 17:22:40 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
Comment 2 Jamie Jones 2006-03-04 02:33:18 UTC
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
Comment 3 Giorgos Keramidas 2006-11-24 00:18:12 UTC
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
Comment 4 Remko Lodder freebsd_committer 2009-11-06 08:02:52 UTC
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.
Comment 5 Glen Barber freebsd_committer 2011-10-17 02:22:35 UTC
Responsible Changed
From-To: freebsd-www->gjb

5 years and 9 months later... 

I'll take this.
Comment 6 Glen Barber freebsd_committer 2011-10-18 14:16:06 UTC
State Changed
From-To: suspended->open

A patch has been sent to www@ for review: 

http://markmail.org/message/4hwh4ruba7qvjafv
Comment 7 Fabian Keil 2011-10-18 20:52:16 UTC
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
Comment 8 Glen Barber freebsd_committer 2011-10-19 03:11:32 UTC
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
Comment 9 dfilter service freebsd_committer 2011-10-23 15:50:38 UTC
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"
Comment 10 Glen Barber freebsd_committer 2011-10-23 15:51:32 UTC
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...
Comment 11 martin 2011-12-07 19:13:37 UTC
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
Comment 12 Devin Teske freebsd_committer 2012-05-04 19:00:06 UTC
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.
Comment 13 Devin Teske freebsd_committer 2012-05-04 22:34:35 UTC
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.
Comment 14 gabor 2014-01-28 07:13:37 UTC
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
Comment 15 Jamie Landeg-Jones 2014-06-16 04:21:01 UTC
(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
Comment 16 Glen Barber freebsd_committer 2014-10-18 03:53:06 UTC
Back to pool.
Comment 17 Benedict Reuschling freebsd_committer 2015-06-15 21:31:50 UTC
Add to website component.
Comment 18 Greg Lehey freebsd_committer 2016-01-20 05:05:31 UTC
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
Comment 19 vali gholami 2017-12-17 07:12:53 UTC
MARKED AS SPAM