No support for images

[fuzzyfox]

No support for images

[fvsch]

What kind of rendering of images would you like to see?

Technically I’m not sure we can do much with CSS. Images are replaced elements and most browsers won’t allow you to use content for the img element itself or even for img::after (replaced elements don’t have ::after/::before pseudo-elements I think).

[fuzzyfox]

Well I have been working on my own version based off yours and a theme in my markdown editor mou.

With CSS I have come up with this:

img {
    visibility: hidden;
    display: block;
    position: relative;
}
img:after {
    content: '\0021[' attr(alt) '](' attr(src) ')';
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 748px;
    color: #cf009a;
}

render of above

Which works quite well but it could do with improvement.

[fuzzyfox]

note that only works in firefox... yet to find a way for webkit and trident

[fvsch]

It would be interesting to have a way to manage (or hack around) generated content in IMG tags. But the most important question is: what’s the use case? I originally built remarkdown.css to give HTML content the appearance of Markdown source, with a focus on readability. It might be nice to allow displaying a Markdown source equivalent of an image, but I’d argue it should be an option rather than the default behavior, and the Markdown-like text should be rendered in addition to the image itself.

On the technical side, I probably won’t have time to research possible workarounds for Trident and Webkit.

[fuzzyfox]

Well the only other option I can think of for images is to just not show them.... but that seems kinda lame.

[fvsch]

After a few tests, this syntax works in Chrome and Safari for replacing the image with corresponding Markdown-like text:

img {
    content: "";
}
img::after {
    content: "![" attr(alt) "](" attr(src) ")";
}

Declaring content: "" on the image is necessary if we want the pseudo-elements to appear (and, possibly, be generated at all). I tried a few things to combine this trick with a way to show the picture, including:

img::before {
    content: url(attr(src));
}

But combining the two CSS functions doesn’t work.
In any case, none of this works in Firefox so it’s not a very practical experiment.

So I’m closing this issue, as I intended to before trying this last ditch test.