Using HTML to display an image in a strange way

Discussion in 'HTML' started by Nik Coughin, Sep 29, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    Hi,

    Please, no lectures about why this is a bad idea. It's not intended to be
    used on the net at large, I did it as a programming exercise and a bit of
    fun.

    What I've done is write a utility that takes an image and turns it into html
    without referring to an external file or using the data:uri or anything like
    that.

    To get a better idea of what I'm on about, have at look at the source of
    this page:

    http://www.nrkn.com/temp/testImage.php

    The page is ~150k but I have gzip enabled so it should only be about 10k to
    download.

    Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
    missing required attributes for starters.

    Can anyone think of a better tag that I can use? It would be good to have
    it as concise as possible. I considered using <hr> tags and changing them
    to display: inline; but it doesn't seem to work.

    --
    "Come to think of it, there are already a million monkeys on a million
    typewriters, and the Usenet is NOTHING like Shakespeare!" - Blair Houghton
    -=-=-=-=-=-=-=-=-=-=-=-
    http://www.nrkn.com/
    -=-=-=-=-=-=-=-=-=-=-=-
    Nik Coughin, Sep 29, 2004
    #1
    1. Advertising

  2. *Nik Coughin* wrote in alt.html:
    [snip]
    > http://www.nrkn.com/temp/testImage.php

    [snip]
    > Can anyone think of a better tag that I can use? It would be good to have
    > it as concise as possible. I considered using <hr> tags and changing them
    > to display: inline; but it doesn't seem to work.


    Run-length encoding in markup, v. interesting! I'd use divs personally -
    semantically neutral and it really saves on alt text...

    If you have javascript enabled you can see an example of arrays of
    'pixel's using divs and background colours at:
    http://andrewu.co.uk/tools/colourpicker/
    When the page loads, submit the form with the default value shown; the
    coloured divs make up the rainbow hue-bar and the light versus
    saturation square below it.
    --
    Andrew Urquhart
    - FAQ: http://www.html-faq.com/
    - Archive: http://groups.google.com/groups?group=alt.html
    - Contact me: http://andrewu.co.uk/contact/
    Andrew Urquhart, Sep 29, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Spartanicus Guest

    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

    >Please, no lectures about why this is a bad idea. It's not intended to be
    >used on the net at large, I did it as a programming exercise and a bit of
    >fun.


    [...]

    >Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
    >missing required attributes for starters.


    Why are you worried about public DTD conformance if it's a bit of fun
    not intended to be used on the net?

    --
    Spartanicus
    Spartanicus, Sep 29, 2004
    #3
  4. Nik Coughin

    Nik Coughin Guest

    Andrew Urquhart wrote:
    > *Nik Coughin* wrote in alt.html:
    > [snip]
    >> http://www.nrkn.com/temp/testImage.php

    > [snip]
    >> Can anyone think of a better tag that I can use? It would be good
    >> to have it as concise as possible. I considered using <hr> tags and
    >> changing them to display: inline; but it doesn't seem to work.

    >
    > Run-length encoding in markup, v. interesting!


    I used RLE because the generated files are quite big (though interestingly,
    the html is around the same size as the PNG source images I was using once
    gzipped!) and it makes sense to have as few elements as possible on the page
    for rendering speed. The other thing I may do at some point is find the
    most common color in the image, set it as the background for the whole
    image, and not draw those elements (maybe by using a margin-right on the
    element before it). I may also look for adjacent pixels of similar color
    and make them the same color to make the RLE more efficient. I think maybe
    have a "compression" value to determine how similar the pixels have to be
    before they are merged.

    > I'd use divs personally - semantically neutral and it really saves on alt
    > text...


    Can't get divs to work unfortunately :(

    If I have...

    <style type="text/css">
    div
    {
    display: inline;
    height: 1px;
    width: 1px;
    }
    </style>

    <div style="background: #f00"></div>

    ....then I get a 1px wide by 19px high red div. If I set font-size: 0; for
    the div I get a 1px wide by 2px high.

    *Sigh*.

    Would be good if I could style something that isn't a container. Damn it,
    <hr> would be perfect if I could get it to display 1px by 1px and inline.

    This...

    <style type="text/css">
    hr
    {
    border: 0;
    height: 1px;
    width: 1px;
    text-align: left;
    display: inline;
    }
    </style>

    <hr style="color:#f00;"><hr style="color:#f00;"><hr style="color:#f00;"><hr
    style="color:#f00;">

    ....draws four 1px by 1px hrs, but each is on a new line despite the display:
    inline, and there is vertical space between them.

    The reason I want my elements inline is to avoid having to use any kind of
    margins or positioning, as this will further bloat the code.

    > If you have javascript enabled you can see an example of arrays of
    > 'pixel's using divs and background colours at:
    > http://andrewu.co.uk/tools/colourpicker/
    > When the page loads, submit the form with the default value shown; the
    > coloured divs make up the rainbow hue-bar and the light versus
    > saturation square below it.


    I like that a lot!
    Nik Coughin, Sep 30, 2004
    #4
  5. Nik Coughin

    Nik Coughin Guest

    Spartanicus wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:
    >
    >> Please, no lectures about why this is a bad idea. It's not intended
    >> to be used on the net at large, I did it as a programming exercise
    >> and a bit of fun.

    >
    > [...]
    >
    >> Now, using <img> the way that I currently am is a gross abuse of
    >> HTML. I'm missing required attributes for starters.

    >
    > Why are you worried about public DTD conformance if it's a bit of fun
    > not intended to be used on the net?


    Perfectionism. OCD. Whatever you want to call it :)
    Nik Coughin, Sep 30, 2004
    #5
  6. *Nik Coughin* wrote in alt.html:
    > Andrew Urquhart wrote:
    >> I'd use divs personally - semantically neutral and it really saves on
    >> alt text...

    > Can't get divs to work unfortunately :(
    > If I have...
    > <style type="text/css">
    > div {
    > display: inline;
    > height: 1px;
    > width: 1px;
    > }
    > </style>
    > <div style="background: #f00"></div>
    > ...then I get a 1px wide by 19px high red div. If I set font-size: 0; for
    > the div I get a 1px wide by 2px high.
    > *Sigh*.


    Regarding the colour picker: For the lightness vs. saturation square
    each 'pixel' is a div with class 'tile' and inline style
    background-colour. All 'pixels' live inside a div of fixed width - it's
    just wide enough to accommodate a row length. This fixed-width div
    itself lives within a div with class 'colourSquare'. That's it (if that
    helps).

    Getting it to work was a bit of trial and error due to unexpected
    effects in IE5+ and Mozilla; Opera7 was no problem at all (Win2K, other
    browsers not tested)

    http://andrewu.co.uk/css/colourpicker.css
    [snip]
    ..colourSquare {
    clear: both;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1px;
    font-size: 1px;
    cursor: crosshair;
    }
    ..tile {
    width: 3px;
    height: 3px;
    float: left;
    /* Peek-a-boo? */
    position: relative;
    }
    [snip]
    --
    Andrew Urquhart
    - FAQ: http://www.html-faq.com/
    - Archive: http://groups.google.com/groups?group=alt.html
    - Contact me: http://andrewu.co.uk/contact/
    Andrew Urquhart, Sep 30, 2004
    #6
  7. Nik Coughin

    Jim Higson Guest

    Andrew Urquhart wrote:

    > *Nik Coughin* wrote in alt.html:
    >> Andrew Urquhart wrote:
    >>> I'd use divs personally - semantically neutral and it really saves on
    >>> alt text...

    >> Can't get divs to work unfortunately :(
    >> If I have...
    >> <style type="text/css">
    >> div {
    >> display: inline;
    >> height: 1px;
    >> width: 1px;
    >> }
    >> </style>
    >> <div style="background: #f00"></div>
    >> ...then I get a 1px wide by 19px high red div. If I set font-size: 0;
    >> for the div I get a 1px wide by 2px high.
    >> *Sigh*.

    >
    > Regarding the colour picker: For the lightness vs. saturation square
    > each 'pixel' is a div with class 'tile' and inline style
    > background-colour. All 'pixels' live inside a div of fixed width - it's
    > just wide enough to accommodate a row length. This fixed-width div
    > itself lives within a div with class 'colourSquare'. That's it (if that
    > helps).
    >
    > Getting it to work was a bit of trial and error due to unexpected
    > effects in IE5+ and Mozilla; Opera7 was no problem at all (Win2K, other
    > browsers not tested)


    Konq works fine (if a little slow) - tribute to it's standards compliance
    that it works without testing.
    Jim Higson, Sep 30, 2004
    #7
  8. Nik Coughin

    Nik Coughin Guest

    Andrew Urquhart wrote:
    > *Nik Coughin* wrote in alt.html:
    >> Andrew Urquhart wrote:
    >>> I'd use divs personally - semantically neutral and it really saves
    >>> on alt text...

    >> Can't get divs to work unfortunately :(

    [snip helpful css example]

    Thanks Andrew. I now have it working with divs. Unfortunately, the RLE
    doesn't work in Mozilla because you can't actually apply a width to inline
    elements. IE and Opera both let you get away with doing it anyway, but
    Mozilla doesn't (and rightly so).

    But... an img is an inline element, and yet you can apply a width to it.
    What's with that?

    Tricksy is it.
    Nik Coughin, Sep 30, 2004
    #8
  9. Nik Coughin

    Toby Inkster Guest

    Nik Coughin wrote:

    > Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
    > missing required attributes for starters.


    Keep with <img> and add in alt="" and src="". <img> is arguably the most
    semantically correct element to use.

    You need to keep working on it though -- if you take the page out of
    quirks mode it falls apart!

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Sep 30, 2004
    #9
  10. Nik Coughin

    Spartanicus Guest

    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

    >doesn't work in Mozilla because you can't actually apply a width to inline
    >elements. IE and Opera both let you get away with doing it anyway


    Quirks mode only for Opera.

    >But... an img is an inline element, and yet you can apply a width to it.


    Applies to: all elements but non-replaced inline elements, table rows,
    and row groups

    Img is a replaced inline element.

    --
    Spartanicus
    Spartanicus, Sep 30, 2004
    #10
  11. Andrew Urquhart, Sep 30, 2004
    #11
  12. *Toby Inkster* wrote in alt.html:
    > Nik Coughin wrote:
    >> Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
    >> missing required attributes for starters.

    >
    > Keep with <img> and add in alt="" and src="". <img> is arguably the most
    > semantically correct element to use.


    In the event that this technique did escape and end up in a general WWW
    environment, I'd prefer to see it implemented in divs (or spans) than
    imgs. The reason being that certain text browsers indicate that an image
    is still present despite setting null-string alt.

    For example in Opera's text browser emulation mode the rendering looks
    something akin to a *very* large histogram! Omitting the alt attribute
    causes a similar effect in Lynx using square brackets. Fortunately JAWS
    for Windows on top of IE doesn't seem to have this problem - reading 385
    "image"s aloud would be somewhat of a hindrance!

    As div/span are generic there is no implied presentation for browsers,
    short perhaps of a newline after div elements in visual useragents.
    Certainly tests in those 2 text browsers with divs generates a page with
    no clues to the presence of the presentational RLE markup.
    --
    Andrew Urquhart
    - FAQ: http://www.html-faq.com/
    - Archive: http://groups.google.com/groups?group=alt.html
    - Contact me: http://andrewu.co.uk/contact/
    Andrew Urquhart, Sep 30, 2004
    #12
  13. Nik Coughin

    Nik Coughin Guest

    Spartanicus wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:
    >
    >> doesn't work in Mozilla because you can't actually apply a width to
    >> inline elements. IE and Opera both let you get away with doing it
    >> anyway

    >
    > Quirks mode only for Opera.
    >
    >> But... an img is an inline element, and yet you can apply a width to
    >> it.

    >
    > Applies to: all elements but non-replaced inline elements, table rows,
    > and row groups
    >
    > Img is a replaced inline element.


    Ah, thanks.
    Nik Coughin, Sep 30, 2004
    #13
  14. Nik Coughin

    Nik Coughin Guest

    Andrew Urquhart wrote:
    > In the event that this technique did escape and end up in a general
    > WWW environment,


    Not likely. There are no real advantages to it. The code is massive and
    bloated and probably not much fun for the poor old browser to have to
    render. The only good thing about it is that it doesn't reference an
    external image, and there are other ways of doing this (though not
    cross-browser). It has definitely been an interesting exercise however, and
    I'll probably play with it some more on the weekend.

    Anyone interested in having a look at the Delphi source or Windows binary
    for the utility drop me a line:

    nrkn
    (a t) nrkn
    d o t
    com
    Nik Coughin, Sep 30, 2004
    #14
  15. On Thu, 30 Sep 2004 09:56:35 +1200, "Nik Coughin"
    <nrkn!no-spam!@woosh.co.nz> wrote:

    >Hi,
    >
    >Please, no lectures about why this is a bad idea. It's not intended to be
    >used on the net at large, I did it as a programming exercise and a bit of
    >fun.
    >
    >What I've done is write a utility that takes an image and turns it into html
    >without referring to an external file or using the data:uri or anything like
    >that.
    >
    >To get a better idea of what I'm on about, have at look at the source of
    >this page:
    >
    >http://www.nrkn.com/temp/testImage.php
    >
    >The page is ~150k but I have gzip enabled so it should only be about 10k to
    >download.
    >
    >Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
    >missing required attributes for starters.
    >
    >Can anyone think of a better tag that I can use? It would be good to have
    >it as concise as possible. I considered using <hr> tags and changing them
    >to display: inline; but it doesn't seem to work.


    I did something similar a year or so ago by styling empty <div>s. You
    can see a couple of examples at:

    <http://theodorakis.net/cssart.html>

    NIck


    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
    Nick Theodorakis, Oct 1, 2004
    #15
  16. Nik Coughin wrote:
    > What I've done is write a utility that takes an image and turns it into html
    > without referring to an external file or using the data:uri or anything like
    > that.
    >
    > Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
    > missing required attributes for starters.
    >
    > Can anyone think of a better tag that I can use?


    One (really evil) method would be to use table cells. With a proper
    algorithm, you could even make the file size reasonable by using colspan
    and rowspan.
    Leif K-Brooks, Oct 1, 2004
    #16
  17. Nik Coughin

    Toby Inkster Guest

    Toby Inkster, Oct 1, 2004
    #17
  18. Toby Inkster wrote:
    > Nik Coughin wrote:
    >
    >>http://www.nrkn.com/temp/testImage.php

    >
    > I'm surprised no-one has posted this already, but about a year ago
    > everyone was thoroughly impressed with this:
    > http://www.designdetector.com/tips/3DBorderDemo2.html
    >
    > A large CSS picture of a house done in just 15,219 bytes.


    Definitely neat, but it's more of a vector image, whereas the OP is
    talking about raster images. Also, I don't think it would be very easy
    (or even possible?) to create an automated converter from SVG or some
    other format; you'd need to program an editor specifically designed for
    CSS slants, or just do it by hand.
    Leif K-Brooks, Oct 1, 2004
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UWluZG9uZyBaaGFuZw==?=

    display image after the image downloaded

    =?Utf-8?B?UWluZG9uZyBaaGFuZw==?=, Mar 2, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    321
    =?Utf-8?B?UWluZG9uZyBaaGFuZw==?=
    Mar 2, 2004
  2. Lukasz Indyk
    Replies:
    4
    Views:
    412
    Diez B. Roggisch
    May 17, 2004
  3. Marek Kurowski
    Replies:
    1
    Views:
    981
    Mark A. Odell
    Aug 18, 2004
  4. Ramon
    Replies:
    2
    Views:
    992
    Ramon
    Oct 25, 2007
  5. Jack
    Replies:
    2
    Views:
    204
    John W. Krahn
    Jan 25, 2008
Loading...

Share This Page