views:

779

answers:

4

Hi, this question can create a misunderstanding: I know I have to use CSS to validate successfully my document as XHTML 1.0 Transitional. The fact is that I have to embed in my webpage a picture composed by zeros and ones created with text image, and the problem is that the code uses deprecated tag font and looks like this

<!-- IMAGE BEGINS HERE -->
<pre>
    <font size="-3">
        <font color="#000000">0001100000101101100011</font>
        <font color="#010000">00</font>
        <font color="#020101">0</font>
        <font color="#040101">0</font>
        <font color="#461919">1</font>
        <font color="#b54f4f">1</font>
        ...etc.etc...
    </font>
</pre>
<!-- IMAGE ENDS HERE -->

(In this code example I inserted a newline after each couple of tags to make it more readable, but the original code is all in one line because of the <pre> tag). The font's color changes at least thousands times so I never considered to create a field in the CSS for each combination.Hope someone knows at least where to find a solution, I searched everywhere :) Thanks

+13  A: 

You could replace

<font color="#000000">0001100000101101100011</font>

with

<span style="color:#000000">0001100000101101100011</span>

etc...

*Edit: I know this is CSS, but it doesn't involve a separate stylesheet like the question states, which may be ok.

Ryan Doherty
Oops, I just posted exactly the same suggestion. I'll delete mine, but I agree with Ryan: this solution doesn't employ a stylesheet. Note, though, that it does bulk up the page by a certain amount.
dland
+2  A: 

What about javascript ?

Send the color data as a JSON array, the '0' and '1' as another array and dynamically generate the DOM elements.

<script>
values = [1, 0, 0, 1, ... ]
colors = ["010000", "020101", ...]

for (i = 0; i < values.length; i++) {
    span = createElement("span"); // use a portable function for creating elements
    span.setAttribute("style", "color:#"+colors[i]);
    txtNode = document.createTextNode(values[i]); 
    span.appendChild(txtNode);
    document.appendChild(span);
}
</script>

Or something like this...

BraveSirFoobar
+1  A: 

Thanks a lot! :D I used this code

<!-- IMAGE BEGINS HERE -->
<div style="font-size:x-small;font-family:monospace">
    <span style="color:#000000">0001100000101101100011</span>
    <span style="color:#010000">00</span>
    ...etc.etc...
</div>
<!-- IMAGE ENDS HERE -->

It works correctly! :D

Francesco
+1  A: 

Why does it need to validate?

The solution you've already got is absolutely fine for what you're doing. It works. This is not a meaningful document that should be marked up with semantic tags for improved accessibility; it's a work of art, so feel free to ignore the rules if it helps you express your intentions more clearly.

If validation is part of the artistic statement you're trying to make, then use <span style="color:#ff00ff;">00</span> as suggested by other posters - but that'll increase your file size considerably.

Another approach is just to change the doctype so you're not targetting XHTML Transitional - use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> or some earlier HTML revision instead.

Dylan Beattie
Thanks for posting. I agree with you about not following the rules in some cases, but I'm trying to make it the more close I can to the standard XHtml, and the file size is not so important for that page; moreover in this case I got the same result :)
Francesco
Have to say I disagree. It's fairly universally accepted that HTML is difficult to support universally as a result of a lack of standard implementations. XHTML is intended to alleviate this, and we should all be striving to meet the new standard and wipe out the pain of original HTML.
Neil Barnwell