Ok, so on a site like this one, there is a tremendous amount of 'code' that I share styled with CSS fonts and using the pre, code, var, tt, samp, and kbd html tags. When using a program like VIM to view/write the code it will be shown with a beautiful font and even excellent colors. So how then can a website like this be configured in such a way that a program called a 'browser' such as Firefox or Chrome would also show the code beautifully?
Here is a screenshot of my VIM in action. (It only looks this good thanks to my crazy awesome .vimrc)
So what is the solution? How to enable beautiful code fonts?
Yet another killer free product provided by Google that is basically a font file server, an A+ product! It will serve different versions of a font depending on the user-agent making the request. Brilliant!
You can use the google webfonts wizard to select and add any fonts.
Then grab the code to add them to your site. The webfonts wizard will show you 3 different methods for adding the fonts to your site. I recommend adding it using the method the way I am doing it on this site.
Here is the one I use:
href= from https:// to // to prevent mixed ssl warnings.Here are the 2 css rules I use.
kbd, samp, tt, pre, code, var, .code, pre {
font-family: "Ubuntu Mono","Droid Sans Mono",Inconsolata,Courier,monospace;
font-style: normal;
font-variant: normal;
font-weight: normal;
word-wrap: break-word;
}
pre {
background: none repeat scroll 0 0 #F3F5F7;
border-color: #AAAAAA #AAAAAA #CCCCCC;
border-image: none;
border-style: solid;
border-width: 1px;
color: #000000;
letter-spacing: normal;
margin: 1em auto 2em 0;
max-width: 97%;
min-width: 50%;
overflow: auto;
padding: 0.5em 0.1em 0.5em 1em;
text-transform: none;
white-space: pre-wrap;
word-spacing: normal;
}
Experiment with different browsers. FYI, the ascii "askapache" in all the below pre elements was created with my free online ascii art tool. Check it out! Also, each of the below examples use inline css to specify the font-family, and the text after Queen and Jack is appended with javascript (just fyi in case you do a view source).
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
Grumpy wizards make toxic brew for the evil Queen and Jack
BTW, the Grumpy Wizards sentence is called a pangram or a holalphabetic sentence because it contains all the letters of the alphabet. Of course google developers would be that smart to use a pangram for the wizard.
The CSS specification defines the white-space property in 16.6 White space.
The white-space property declares how white space inside the element is handled.
| Values | normal | pre | nowrap | pre-wrap | pre-line | inherit |
|---|---|
| Initial value | normal |
| Applies to | All elements |
| Inherited | Yes |
normalprenowrappre-wrappre-lineinherit