CSS Styles for cooler looking ascii-art

http://briankhuu.com/blog/self/2015/01/14/css-style-for-ascii-art.html

by mofosyne • 12 years ago

32 12 12 years ago

briankhuu.com

tom4000• 12 years ago

I'd prefer plain style without shadows.

mofosyne5• 12 years ago

That should work with just a removal of the "text-shadow" line.

    /*
    Diagram and ASCII ART styling for Jekyll 
    (and other markdown parser that appends a .language- prefix)
    */
    .language-ascii-art {
     display: inline-block; 
     font-family: "Lucida Console", Monaco, monospace;
     letter-spacing: -0.2em;
     line-height: 0.8em;
    }

wingerlang• 12 years ago

Wouldn't it also work by just not having CSS on it at all? Except for maybe the font.

some1else2• 12 years ago

I don't have perfect vision, so these sort of glows kick in automatically, especially when I'm tired. I't problematic enough to make me switch to a lower contrast theme when I work at night. It would make sense to apply an effect like that only if it were _increasing_ legibility.

Take a look at this a demo pic: http://cl.ly/image/1i0x2X3W3G0x

Notice the rare case where the drop-shadow helps increase the contrast between foreground and background. You'll get props for doing that any time you pull it off.

mofosyne5• 12 years ago

Good point. But I may make the case, that ascii art is more about pictures, and less about text. So the reduced readability of text might not matter as much. I tried shadowless, and its less visually appealing.

             /\_/\
        ____/ o o \
      /~____  =-= /
     (______)__m_m)

But in the context of ascii-diagrams, then I can see you point of not including stylised drop shadows.

---

Btw, no shadow example is added now.

some1else2• 12 years ago

I suppose what you like about the effect most, is that it fills the gaps that are intrinsic to ASCII art. But our brains are already wired to do that: http://bit.ly/1xeEci5. The shadow blur eats away at the details that are in fact a quality of ASCII art (like which characters were chosen to emulate a shape). The demonstrated CSS drop-shadow effect is really easily toggled by squinting your eyes instead: http://bit.ly/1DNrkXK.

Guess you're right in stating that it looks "cooler" though. Try making the shadows dark grey instead of black: http://cl.ly/image/073a412z0f34.

pherocity_• 12 years ago

Although, I like the Mona Lisa example, I have to think that the point of ASCII art is to look like ASCII art because if it doesn't, then it's just a shitty picture. Cool POC tho.

zoidb2• 12 years ago

Nice! The banner generator uses figlet fonts and there is a javascript parser out there, check out http://github.com/scottgonzalez/figlet-js

Also speaking of which I created a canvas breakout game that uses a modified version of that lib a month ago - https://github.com/jarv/ascii-breakout (http://ascii-breakout.com if you want to see it in action)

mofosyne5• 12 years ago

very cool! Impressed that you could get that working like that. Quite fun too.

On a side note. I wonder if you would like to somehow port http://ditaa.sourceforge.net/ to javascript.

Since many technical diagrams are done in ascii. It might actually be handy to auto convert to a Canvas image.

Not sure how one would deal with ascii-art to canvas however. But technical drawings is important.

zoidb2• 12 years ago

It would be relatively simple to do, I'm surprised that http://asciiflow.com/ doesn't have an option for it, but now that I think about it a little more I think most people create these ascii diagrams because they just want ascii for embedding in a text doc and probably? don't need to convert them.

CSS Styles for cooler looking ascii-art

Related Stories