I'm taking a stab at making CSS sparklines - see
http://www.edwardtufte.com/bboard/q-...ic_id=1&topic=
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Sparklin es</title>
<style type="text/css">
..dot {
border-bottom: 1px solid #777777;
float: left;
width: 3px;
}
#cont {
height: 12px;
width: 60px;
background-color: #dddddd;
}
</style>
<script type="text/javascript">
window.onload = function() {
var ht = parseInt(Math.r andom()*10);
var cont = document.getEle mentById('cont' );
for (var i=0; i<20; i++) {
ht += parseInt(Math.r andom()*3)-1;
ht = Math.abs(Math.m in(ht, 9));
var d = document.create Element('div');
d.style.height = ht+'px';
d.className = 'dot';
d.appendChild(d ocument.createT extNode(' '));
cont.appendChil d(d);
}
};
</script>
</head>
<body><p>a sparkline is a graph
<span id="cont"></spanthat can be embedded within the text of a
paragraph</p>
</body>
</html>
What I want is the span to be flowed in with the text of the paragraph.
This works properly with IE; unfortunately, Firefox sees the nested,
floated divs (DHTML-generated code):
<p>a sparkline is a graph
<span id="cont">
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 8px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 8px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
</spanthat can be embedded within the text of a paragraph</p>
and makes everything containing it block-level. So the text will flow
around it (as with a floated image), but not incorporate it between two
specific words.
Does anyone know of a solution to accomplish this? Getting an
inline-level element to contain block-level elements? Or perhaps a way
to not use "float" and get the same effect? I prefer a CSS-only
solution where possible; the solutions you find on Google do something
similar but with 1px-wide gifs instead of DIVs.
Thanks,
David
