In this corner! weighing 133 lbs, the challenger, Cascading Style Sheets. In this corner! weighing 896 lbs, the Vanilla Gorilla, CFDOCUMENT.
That’s right ladies and gentlemen, the fight to end all fights, cfdocument, with different implementations of html handling between cf7 and cf8, will take on css, which displays certain formatting properties differently between html 4 and xhtml 1.
It was quite a showdown. Especially when we extracted the html from the code in order to create html that actually floats AND overlaps a column of text. Then cfdocument it.
First we got it to work in both Mozilla and MSIE. Easy-peasy. Then we gave all that VALIDATED html to cfdocument and it failed to render as either browser presented it.
So we scratch our heads for a little while, search the web for info and page through some old CF books. In a CFCert book for mx7 we find a note that cfdocument doesn’t support xhtml1 and check our doctype. WHAM its declared as xhtml 1 strict.
Odd, we think, since we are running cf8, and all the stuff we are finding online says “valid xhtml1″. But then it occurs to us that one of the servers, test, is running cf7…so, we might as well create code that renders on test too.
So I change the doctype and feed it to cf8. Wham, it works in CF8. Well ok, we think, and are very proud of ourselves, now it will work on test too. We zip it up and push it out and does it work on test… NOOOO.
We give up and tell the testers to test pdf’s on staging.
We is mostly me, here, but also includes an HTML expert and my boss.
So, that’s the story, but what is behind it? Well Some of it i can’t explain and some of it i’m just guessing but i think it probably has to do with one or more of the following:
- Support for HTML in CFDOCUMENT
- Support for CSS in CFDOCUMENT
- The dreaded “Quirks Mode” wherein browsers attempt to handle invalid or untyped xhtml.
- CFDOCUMENT in CF7 and CF8
- Using HTML tables for formatting.
- Attempting to generate valid HTML from a series of regular expressions.
- The cocky attempt to display 2 columns of text in a dynamically generated pdf
- The cocky attempt to then float an image over one column.
Regardless, we won the war with a couple of improper uses of HTML and copius use of HTML Doctypes.
Here is the final code (sans database and other code stuff)
Commentary: This mixes inline styles and embedded styles. The original stuff is inline. The floating image and whatnot is embedded. Long story about applying styles in cfdocumentsections skipped for now. However suffice it to say that cfdocumentsection resets all styles, so i put as many as i could inline.
Commentary: tables for formatting were used because we couldn’t make css do the job, possibly because we were designating xhtml1.
Commentary: if you grab this code, change the doctype to xhtml1 strict and take a look at the difference in how the floating image is handled between the two. It will make you smile.
<cfsilent>
<!---
This file displays the standard PDF sheet
REVISION TRACKING:
MT - 1/30/08 - Create file
--->
</cfsilent>
<cfdocument format="PDF" marginleft=".6" marginright=".6" marginbottom=".8" margintop=".6">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>title goes here</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
img.floatbak
{
top:-15;
float:right;
margin-top: 0;
margin-left:5;
margin-bottom:0
}
img.float
{
position:absolute;
right:0px;
top:40px;
z-index:1
}
</style>
</head>
<body>
<div id="container" style="width:100%;">
<div id="nonfloat" style="width:100%;">
<table>
<tr>
<td><img src="images/logo_image.gif" alt="Company Logo" /></td>
<td><p style="font-family:arial black,arial,helvetica,sans-serif;font-size:16pt;">
Company Information Sheet <br/>
<em style="font-family: Arial, Helvetica, sans-serif;font-size:14pt;font-style: italic;font-weight:bold;">
Company Name
</em>
</p></td>
</tr>
</table>
</div>
<div id="nonfloat2" style="width:100%;">
<table cellpadding="5" cellspacing="1" width="100%">
<tr>
<td valign="top" width="50%"><p style="font-family:Arial Black, Arial, Helvetica, sans-serif; font-size:12pt;font-weight:bold;"> big data left side </p>
<p style="font-family: Times New Roman, serif;font-size:11pt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p style="font-family: Times New Roman, serif;font-size:11pt">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
</p>
</td>
<td width="50%">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class="float" src="images/folating_image.jpg" alt="secondary logo" >
<div style="position:relative;z-index:0;margin-left:10px;margin-top:10px;margin-bottom:10px">
<p style="font-family:Arial Black, Arial, Helvetica, sans-serif; font-size:12pt;font-weight:bold;">Big data right side</p>
<p style="font-family: Arial, Helvetica, sans-serif; font-size:11pt;font-weight:bold; font-style:italic;">italicized numerical values<br>second value</p>
<p style="font-family: Times New Roman, serif;font-size:11pt"> Sed ut perspiciatis
unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur?
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
</cfdocument>