2017-05-30

I've made a lot of improvements to my online resume over the past few weeks. One 
feature of that Web Form is hiding and showing different levels of information 
based on user input. The basic version hides my contact information, identities 
of employers, and information about my military service. This sort of data can 
be shown on the basis of the authentication the visitor provides. For example,
some employers place a premium on hiring veterans, so I'd want to be sure the
military service is included; but because my military skills aren't directly 
relevant to my field, other employers may be less interested in seeing it.

This kind of shell game can also be played with CSS. In its simplest form, features 
and decorations meant for the screen can be hidden through the use of a style 
dedicated to print.

I got to thinking about the differences between online and print versions beyond
decorations like background images. Significantly, ancillary information like 
hyperlinks get lost on paper. On the screen, these links can be used to provide 
details about terminology or background information on a certification -- they 
can allow the visitor to explore your message more fully. So the challenge a 
print version presents is how to give the reader the option to take that deeper
dive. My solution: end notes.


END NOTES


I thought the use of end notes would provide a clean way to give the reader 
access to extra information without cluttering up the body of the resume. 
I'm sure there are cleaner ways to implement it, but I ended up taking the 
JavaScript and CSS route.


JavaScript and CSS

At first I thought I'd make it "dumb," and just build everything manually 
into the content. But I quickly realized that the whole "hide-and-show" 
thing made a static implementation a no-go. So the approach is in two 
parts: using CSS classes to identify hyperlinks that should be included 
in the end notes, and using JavaScript to inventory the marked links and 
output a list of links within a div at the bottom of the document.


CSS

The CSS class was the easy part. Create two classes -- one to identify each 
link that you want included in the end notes, and one to govern the behavior 
of each citation (the superscript number you see in the content body).  In
the example below, we'll use the class called "endnote" to identify the 
links, and the class called "citation" for the citations.

<a href="http://www.cheese.com/fromage" class="endnote">cheeses</a><span class="citation"></span>

Then in the styles, set the endnote class to "display:none;" in the standard 
stylesheet, and set it to "display:inline" in the print css.

The citation CSS takes advantage of CSS counters. CSS counters are a really 
convenient way to enumerate objects in CSS. The counter is created in a 
parent object in the DOM using the counter-reset property, and incremented 
through the counter-increment property. All of the CSS that follows is intended
for the print CSS, not for the screen.

counter-reset

Let's say you have a div called "divContent" that houses all of your page 
content. Adding the counter-reset property, and identifying the class, 
is what kicks off the counter:

        #divContent {
            margin-left:10px;
            counter-reset: endnote;
        }

This is telling the content to start counting every instance of the endnote
class under divContent.

counter-increment

Now we need a device to increment the counter. We'll do that directly in
our citation class, using the :before content selector:

       .citation:before {
            counter-increment:endnote; 
            content: " " counter(endnote, decimal) " ";
        }

This style is telling the code to increment the counter each time it hits 
the endnote class, and to insert the value as a decimal into the <span>
with the citation class. That "decimal" specification is a list-style-type.

Finally, we arrive at the main CSS for the citation class. Set it to 
"display:none;" in the standard stylesheet and set it as follows for print:

       .citation {
            font-style: italic;
            vertical-align: super;
            font-size: x-small;
            display: inline;
        }


JavaScript

The JavaScript component of the equation comes in two parts: the function 
and the triggering mechanism.

The, eh, function of the function is to inventory the hyperlinks with the
endnote class, then loop through and fill a div called divEndNotes with 
the number of the endnote and the href attribute from the hyperlink. 

In my case, divEndNotes lives on the server side, so I have to prepend the 
ASP.NET notation to the name inside my JavaScript. 

The function can be implemented in a script block in the code forward:

        function gethref() {
            var x = document.getElementsByClassName("endnote");
            var i = 0;
            for (i = 0; i < x.length; i++) {
               document.getElementById("ctl00_ContentPlaceHolder1_divEndNotes").innerHTML += '<sup>' + eval("i + 1") + '</sup> ' + x[i].getAttribute("href") + '<br />';
            }
            document.getElementById("ctl00_ContentPlaceHolder1_divEndNotes").innerHTML += '<br /><br />';
        } 

The <sup> tag is an HTML tag that is meant to apply a superscript style to 
the content within it.

The messiest part of figuring out how to do all of this was in the triggering 
mechanism. The solution was to place the call directly inside of divEndNotes.
My standard content for each of the content divs is a table, so I stuck the
call inside of a table cell, like this:

        <hr class="endnote_separator">
        <table class="no_break">
        <tr>
        <td align="left" width="80%">
          <script type="text/javascript">gethref();</script>
        </td>
        </tr>
        </table>

The div's CSS is set to "display:none;" in the standard CSS, and set to "display:
block;" in the print stylesheet. Since divEndNotes is the last content to get
drawn, all of the endnotes content is already present in the document when the
call gets triggered. 

Sadly, this triggering mechanism can still use some work. I need to do additional 
testing, but I suspect that the table structure is all getting overwritten by the 
JavaScript. At this point, I'm happy to be getting correct output -- it's just not
formatting as well as I'd like.... a small matter.


PAGE-BREAK-INSIDE and PAGE-BREAK-AFTER

Speaking as we are about print, CSS offers some very nice properties to
help take away some of the pain of formatting content for the printed 
page. 

The page-break-after property tells your browser to put a page break immediately
following a particular object. Similarly, the page-break-inside property can 
offer direction on how to handle page breaks when they occur within a block of
content. 

The values I use for these are:

	page-break-after:always;

and

	page-break-inside:avoid;

This allows me to sticuplate that a page break should always follow a specific 
block of content, and that page breaks within certain blocks should be avoided.
In the HTML included in the CSS discussion above, you may have noticed a class
called "no_break" applied to a table tag. That class contains the page-break-
after property (with the value set at "always").


That should be it for now! Contact me using the site's contact form if 
you have questions. Feel free to use the code in your projects. A shout
out in your project would be thoughtful. Also, drop me a line and let me
know how you might have tweaked things to better suit your needs. 
Finally, I wouldn't profess to be THE expert on matters represented in
my code -- so drop me a line if you have constructive suggestions, too. 
I'd like to hear from you!
  

Best,

halfgk


copyright 2017 halfgk.com