with line-numbering "on"
This page describes a problem that I have had printing pages comprised of snippets of codes highlighted by jQuery Chili with line-numbering "on". In this case, the printout is simply unreadable since the useful content extends far beyond the edge of the printed page and is clipped. I am using jQuery-1.9.1 with jQuery-migrate-1.1.1 and jQuery.chili-2.2.
What the problem is
When writing HTML, I often find it handy to use <pre> tags whenever I want to include snippets of source code. <pre> tags are great, because they tell the browser to preserve all whitespace, including indentation, and not to do line wrapping. In addition, I use jQuery Chili to do the highlighting: it requires that I use a <code> tag inside the <pre> tag.
Sometime ago, when print-previewing one of my pages containing jQuery Chili highlighted code with line-numbering "on", I noticed that the text of the printed page extended far beyond the edge of the paper, leaving very little to be read. Turning line-numbering to "off", the printed page was back to normality.
Have a look at Figure 1.
 |
 |
See the difference? On the left, all the text of the page is on the printed page of paper whereas, on the right, the text extends much beyond the paper and most of it is clipped. It is unreadable!
Why?
What can cause this condition? Something that jQuery Chili does when line-numbering is "on" that it does not do when it is "off"?
This is a printing only problem!
When I use the CSS file print.css as media screen, the content does not use more space than the screen offers. The display is driven by the same file but the two devices seem to handle CSS in different ways!
Test case
I have selected a snippet of CSS code for demonstration. Driven by jQuery Chili, the line numbering can easily be turned "on" and "off" by adding or removing the "ln-" class to the <pre> container tag.
p.notebox {
display:block;
width: 80%;
background: #eee;
padding: 15px 45px 15px 60px;
margin: 0 auto;
position: relative;
/*Font*/
font-size: 1.0em;
line-height: 1.2;
color: #000;
text-align: justify;
}What does jQuery Chili do with the code?
What could the cause of this be? jQuery Chili knows the programming language of the code from its class and it selects the appropriate CSS rules that it puts in the <head> section of the page. Then it reads the code line by line and highlights it by using "regex" in order to recognize and highlight elements, classes, properties, values and numbers. This process generates a lot of <span> tags with appropriate classes. See the HTML code produced by jQuery Chili when line-numbering is "off".
<pre>
<code class="css">
<span class="css__element">p</span>
<span class="css__class">.notebox</span>
{
<span class="css__property">display:</span>
<span class="css__value">block</span>
;
<span class="css__property">width:</span>
<span class="css__number">80%</span>
;
...
}
</code>
</pre>
In his test case, on the first line, jQuery Chili recognize "p" as a css_element and ".notebox" as a css_class and it does the same thing with all the successive lines as show above.
And, now, let's see what is the code produced by jQuery Chili when line-numbering is "on".
<pre class="ln-">
<code class="css">
<ol start="1">
<li>
<span class="css__element">p</span>
<span class="css__class">.notebox</span>
{
</li>
<li>
<span class="css__property">display:</span>
<span class="css__value">block</span>;
</li>
<li>
<span class="css__property">width:</span>
<span class="css__number">80%</span>
;
</li>
</ol>
</code>
</pre>In this case, all the lines of code are wrapped in an <ol> tag and each line is surrounded by <li> tags. From inspection of the code that jQuery Chili generates with Firebug, jQuery Chili replaces every normal space with non-breaking spaces (" ") which may explain why the printout expands beyond the right side of the printed page.
Test HTML page
I made a fresh html page with the following code and it is the program that was used to generate Figure 1 above.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="/include/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="/include/recipes.js"></script>
<style type="text/css">
body {max-width:100% !important;} /* <-- solution */
h1 {text-align: center;}
p {
font-family: verdana, sans-serif;
font-size: 13pt;
}
pre {
width: 95%;
border: 5px double red;
background-color: yellow;
overflow: hidden;
position: relative;
}
</style>
<title>Test Chili printing</title>
</head>
<body>
<h1>Test page for Chili printing with line-numbering "on"</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</p>
<pre class="ln-"><code class="css">p.notebox {
display:block;
background: #eee;
padding: 15px 45px 15px 60px;
margin: 0 auto;
position: relative;
/*Font*/
font-size: 1.0em;
line-height: 1.2;
color: #000;
text-align: justify;
}</code></pre>
</body>
</html>It showed the same problem on printing until I found a solution: I added the following CSS statement at line 13 of the code: body {max-width:100% !important;} [ inspired by one answer in Safe Width in Pixel for Printing Web Pages? on Stackoverflow]. See the result below.
 |
I added this statement to the print.css file that is used to style printing on my web site and the "hard copies" which are produced are perfect. Therefore, the immediate problem is solved and visitors can print useful pages from the site though I still don't know what in the processing performed by jQuery Chili causes the problem.
References
- Highlight your source code with jQuery and Chili - In this first tutorial you will see how to highlight source code with the help of the jQuery Plugin Chili. Since this is not just another Chili Quick Start Guide we go further and tweak Chili to our liking (add one line of code) and implement our own functions to increase the readability and usability of source code. - See more at: http://usejquery.com/blog/highlight-your-source-code-jquery-and-chili#sthash.iQMSM87l.dpuf
- Highlight code with jQuery and Chili - In the first tutorial you will learn how to highlight source code with the plugin jQuery Chili. And it's not just another quick note on Chili: we learn to modify Chili in its sole discretion and to integrate it into their own features to enhance the readability of the code illuminated.
- Print Different - Although you may not realize it, the Web is a multi-medium information source. No, I'm not talking about multimedia-- audio and video streams, for example-- but the actual medium through which the Web's content is conveyed to us. For the vast majority of users, the medium is visual: the monitors we use every day to display pages. But there are many who also turn to the medium of print, creating "hard copies" of pages using their laser printers.
- Perfect Pre Tags on Perishable Press - If you operate a web site that features lots of code examples, you know how important it is to spend some quality time styling the <pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect <pre> tags.