Some tech documentation and snippets, finally organized.
Posts tagged as css

Firefox word wrap / readability hack

Web pages that come with minimalistic HTML formatting or whose stylesheet(s) got caught by some filter are often difficult to read, due to their long lines - especially in maximized or full screen mode on modern wide-screen displays.

Mozilla's Firefox allows the use of a "custom default stylesheet", which makes it possible to define a maximum width for elements with continuous text. The CSS file has to be named userContent.css and resides under chrome/ in your Firefox profile folder.

These lines have proven to hardly ever interfere unfavorably with other stylesheets:

/* File: FF_PROFILE_FOLDER/chrome/userContent.css */

@-moz-document {}
body { margin-left: 40px; }
p, li, blockquote { max-width: 800px; }

The next even simpler solution centers the whole HTML body element in the browser window, but thus is more prone to corrupting pages that are styled otherwise (i.e. with fixed-width elements that exceed the defined max-width of in this case 800 Pixels):

/* File: FF_PROFILE_FOLDER/chrome/userContent.css */

@-moz-document {}
body { 
    max-width: 800px;
    margin: auto; 

Note that in both examples a fixed width property would make the lines run out of superordinate CSS elements respectively the browser window, if they are less wide than the defined value.

Chromium/Chrome has abandoned support for user stylesheets with version 33.