HTML line break space, (php image ascii reader)

Today I've been working on PHP Image (pixel by pixel) reader, basically it's reading whole image into an array of HEX colors.

I have tried to achieve this effect: http://cfgfactory.com/images/i/d50b1_spaces.png Using CSS: letter-spacing:-2px; but it's开发者_运维技巧 only changing horizontal spaces.

But unfortunately I can't get rid of the line break spaces it's so annoying ! I would like every single letter to be as close to each other as possible (like pixels)

Here's the part of code: http://pastebin.com/Q65uC1Ch

Thanks in advance !

You could:

1. Use this Unicode character: █ (█)

2. Change the line-height value in CSS

PS: You have a non-closing <span> tag in every even line, written when $line % 2 == 0

PPS: Maybe your PHP loop would be cleaner this way:

for ($i = 0 ; $i < $total ; $i++) {
    $newline = ($i % $size[1] == 0);
    if ($newline) {
        $line++;
        $html .= '<br/>';
    }
    $html.= '<span ';
    if ($newline && $line % 2 == 1) {
        $html .= 'class="mad" ';
    }
    $html .= ' style="color:'.$t[$i].'">'.$char.'</span>';
}

PPS: to keep control on the room taken by every character, you could wrap them into table cells instead of <span>

I recommend getting rid of the <br /> tags. You can wrap each line in a <div> tag and then you can adjust the spacing with css.

If you can post a sample of the results, it would be easier to diagnose the problem.