How can I pad list items and prices with periods using php?

Question

Basically, I'm using mpdf (a custom PHP class) to create dynamic pdfs for users of a website. It's all working well, except for one thing. I'm using dot leaders in the html/css of my website to create this sort of effect:

http://jsfiddle.net/j6JWT/7/

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt span:after { content: " .................................................................................." }

However, mpdf completely ignores this css when it generates the pdf. If anyone's familiar with mpdf, I'd appreciate it if you told me why this is.

The thing is, it would probably be a better idea to actually generate the periods using PHP. To clarify, I would like this effect http://jsfiddle.net/j6JWT/7/ achieved through PHP.

What I'm having trouble with conceptualising is how to make it dynamic. The items are coming from a database, and some list items are very long, so will require less dots between them and the price, if you understand.

Any and all help valued!

Answer 1

I don't think it is a safe solution to generate a "..." content, with CSS or PHP because you are not sure about the behaviour of the policy. It purely a presentation issue.

You can produce the same solution with some more CSS

dl { width: 450px }
dt { float: left; height: 20px; width: 300px; display: block; position: relative; }
dd { float: left; height: 16px; padding-top: 6px; padding-left: 5px; width: 120px; overflow: hidden }
dt { border-bottom: 1px dotted black; }
dt span { border: 0; display: inline-block; height: 20px; position: absolute; left: 0; top: 6px; background-color: #FFFFFF; padding-right: 5px; }

Here is a working example : jsfiddle

You just have to check if the PDF class is handling properly these CSS rules.

Answer 2

Easy if it's a monospaced font.

echo '<pre>';
// pretend we know the maximum item name strlen, these dots would be that length + 1 at least 
$maxdots='........................................................................';
$maxlen=strlen($maxdots);

$items=array(array('Drug 1', '10ml'), array('Another drug', '20ml'));
foreach ($items as $item){
    $item[1]=substr($maxdots.$item[1], strlen($item[0])-$maxlen);
    echo $item[0].$item[1]."\n";

}

Another way if it's not monospaced is to use a repeating background image

<div class="dottedrow">
    <span class="title">Drug 1</span>
    <span class="size">10ml</span>
</div>

With CSS

.dottedrow{
    background:url(dots.png) bottom left repeat-x; /* or is it repeat-y?*/
    display:block;
}
.dottedrow span{
    background:#fff; /* knock out the image */
    float:left;
}
.dottedrow span.title{
    text-align:left; 
    width:70%;
}
.dottedrow span.size{
        text-align:right; 
        width:30%;
    }

Now I'm out of ideas.