

CSS Styles for cooler looking ascii-art - mofosyne
http://briankhuu.com/blog/self/2015/01/14/css-style-for-ascii-art.html

======
some1else
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](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.

~~~
mofosyne
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.

~~~
some1else
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](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](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](http://cl.ly/image/073a412z0f34).

~~~
mofosyne
I agree. Lighter black seems to do the trick. Page corrected.

text-shadow: 0 0 5px rgba(100,100,100,0.5);

------
zoidb
Nice! The banner generator uses figlet fonts and there is a javascript parser
out there, check out [http://github.com/scottgonzalez/figlet-
js](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](https://github.com/jarv/ascii-breakout) ([http://ascii-
breakout.com](http://ascii-breakout.com) if you want to see it in action)

~~~
mofosyne
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/](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.

~~~
zoidb
It would be relatively simple to do, I'm surprised that
[http://asciiflow.com/](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.

------
tom4000
I'd prefer plain style without shadows.

~~~
mofosyne
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
Wouldn't it also work by just not having CSS on it at all? Except for maybe
the font.

~~~
mofosyne
Well the point of this, is to ensure that stuff like dashed lines, appears as
a solid line. So in the context of ascii-art, this reduces the screen door
effect (At the cost of visibility of alphanumeric texts).

If you look at the style, it's essentially just moving text characters closer
to each other.

\---

Btw, no shadow example is added now.

------
pherocity_
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.

