backtop

Print 20 comment(s) - last by Trisped.. on Mar 1 at 7:16 PM
The trick is in the monospace font

I use Microsoft Corp.'s (MSFT) Office 2010 a lot, and have been discovering some neat tricks.  As I find them, I will try to share them with you for your benefit.

The Office suite has many familiar faces -- Word, PowerPoint, Excel, Access.  But it also came with OneNote.  I had been given a free copy of OneNote several years ago, but never had the time to install it -- or saw the point.  But now it's fair to say that I'm relatively OneNote-obsessed.  Yes it has it's shortcomings (no video or animated GIF support), but it's a terrific place to organize your thoughts.

I play a fair amount of games, so I recently had the bright idea of pasting several FAQs from my favorite games into OneNote.  I use GameFaqs, and as you may know, some of the Faq authors go to great and elaborate links with their Ascii art.

I copied and pasted the Faq into OneNote only to be greeted with a horrific mangling of text.

Ascii art mangled (Liberation Sans)
...the horror!  The font is San Serif, but this is not the Ascii art we're looking for.

So I started poking around Gamefaqs' publicly visible CSS sheet and saw they were using Helvetica.  But of course Helvetica has been purged from Windows 7.  So I went on a search for a replacement, arriving at Liberation Sans, a similar font.  I installed Liberation Sans (type "font" in search bar, copy and paste *.ttf files into the folder that comes up).  

But the Helvetica analogue didn't do the trick.  So I went pack to poking around forums.  Finally I found an answer.... the monospace font.  It turns out you can use Courier New and get glorious, perfect Ascii art, just like you would on GameFaqs.  The key is that you must only use monospace fonts -- like Courier New.

Below are the results:

OneNote good ascii art (Courier New)
At last, beautiful Ascii art is ours!

Enjoy!  And send me your Office tricks if you'd like me to share them with the world -- I'll give you credit.

Comments     Threshold


This article is over a month old, voting and posting comments is disabled
Easier way to get the css style.
By Trisped on 2/14/2012 6:50:17 PM , Rating: 2
I use Chrome, but I think there is a way to do this in FF or IE.

Right click on the block you want to analyze (in this case anywhere in the actual FAQ).
Click "Inspect element".
In the window that pops up there will be a column on the right with a "Styles" grouping. From there we can see:

element.style {
}

Matched CSS rules
pre, xmp, plaintext, listing { *user agent stylesheet*
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}

Inherited from body
body { *file.css:3*
color: black;
}

These styles represent all the recognized CSS formatting applied by the browser.

Does anyone know how to do the same thing in IE or FF?




RE: Easier way to get the css style.
By adiposity on 2/14/2012 8:05:49 PM , Rating: 2
Your best bet is "PRE" tags.

<PRE>
Ascii Art
</PRE>

However you can specify any fixed width font using

font-family: monospace

or

font-family: "Courier New";
(this works if the system has Courier New font installed, ie Windows systems or Linux systems with webfonts).

better yet:

font-family: "Courier New", monospace;

Which will give you monospace if Courier isn't available.

All major browsers support both PRE and "font-family".


RE: Easier way to get the css style.
By JasonMick (blog) on 2/14/2012 10:49:29 PM , Rating: 2
Thanks guys, good info... the CSS browser will be fun to play around with.

I'm not a web dev, or at least not a professional one certainly, but I love to learn new stuff. :)


RE: Easier way to get the css style.
By Etsp on 2/17/2012 10:28:08 AM , Rating: 2
Here's what really happened: Gamefaqs apply no styles to their faq pages. As a result, all CSS properties go to user agent defaults.

Gamefaqs also wrap their faq contents inside of a pre tag. The default font-family for Firefox and Chrome for a pre tag is monospace. End result of this is what you saw in your browser was the font-family monospace.

As a side note: The pre-tag isn't always necessary. You can apply similar formatting to any element use the CSS property white-space. See more info here: http://reference.sitepoint.com/css/white-space


Pretty Cool
By Just Tom on 2/13/2012 8:09:14 AM , Rating: 2
Neat trick, I have a friend who is an ardent OneNote user. I have never understood her attraction but game faqs are something I can get behind.




RE: Pretty Cool
By kleinma on 2/15/2012 5:11:53 PM , Rating: 2
I love onenote. Especially since I can now sync it with my iPhone and Android phone, and it syncs between my work and home PC. I believe it will sync up to 500 "notes" for free, and then there is a paid version, but I am not even at 100 notes, and I purge old stuff that is not needed anyway after some time.

I use it to organize projects I am working on, or just to type random stuff in that I will need but don't know where to put it right now. I used to open up notepad when I would have to type something in or paste something real quick, but onenote saves as you type, so if your PC gets rebooted from some updates, or you close down the program by accident, you don't lose what you put in. Plus it installs as a printer so you can print items directly to it (like the plane ticket I just bought, I printed to onenote and put it in a notebook where I am organizing my stuff for my trip to Microsoft at the end of the month)

I never really got into onenote before, but it is really awesome and I am glad to be using it now. I have to think it should only get better with Office 15 and more touch integration.


geee
By marsovac on 2/21/2012 6:51:53 AM , Rating: 4
So to have ascii art displayed correctly you need fixed width fonts (monospace) ?

Wow.

On 9gag you would be getting a "Captain obvious" mark.




Helvetica
By adiposity on 2/13/2012 12:33:00 PM , Rating: 2
quote:
So I started poking around Gamefaqs' publicly visible CSS sheet and saw they were using Helvetica. But of course Helvetica has been purged from Windows 7. So I went on a search for a replacement, arriving at Liberation Sans, a similar font


Helvetica has not been "purged" from Windows 7. Helvetica has not ever been in Windows, to my knowledge, having been replaced with Arial from the start. The two are nearly identical and can be used as substitutes if you don't care about the minor glyph differences.

See here: http://www.ms-studio.com/articles.html




I forgot
By adiposity on 2/13/2012 5:48:00 PM , Rating: 2
quote:
So I started poking around Gamefaqs' publicly visible CSS sheet and saw they were using Helvetica. But of course Helvetica has been purged from Windows 7


I forgot to ask, if Helvetica has been purged from Windows 7, how do your browser correctly render the page which specifies Helvetica as the font? Typically your browser would substitute Arial for Helvetica, since they are largely the same.

But the real answer is, they weren't using Helvetica (not a fixed width font). In this case I assume they just used PRE tags. It's entirely possible OneNote would allow you to use PRE tags, as I assume it can handle HTML.




Is this a joke
By the goat on 2/13/12, Rating: -1
RE: Is this a joke
By adiposity on 2/13/2012 12:26:09 PM , Rating: 2
Not to mention, Helvetica is not a solution, because it's not a fixed width font...it is just a near identical font to Arial.

I would not use Monospace, I would use Courier New, but that's just me.


RE: Is this a joke
By dasgetier on 2/17/2012 7:25:24 AM , Rating: 2
I prefer Consolas, it's kinda pretty.


RE: Is this a joke
By nafhan on 2/17/2012 8:01:59 PM , Rating: 2
I second the Consolas.

Also, this tip is useful for real stuff beyond ASCII art, too. I do something similar pretty regularly to paste command line output into, say, an MS Outlook email or other document - as command line output gets misaligned by variable width fonts.


RE: Is this a joke
By Flunk on 2/13/12, Rating: 0
RE: Is this a joke
By Trisped on 2/14/2012 7:07:48 PM , Rating: 2
From http://en.wikipedia.org/wiki/ASCII_art#Non_fixed-w...
quote:
Some ASCII artists have produced art for display in proportional fonts. These ASCIIs, rather than using a purely shade-based correspondence, use characters for slopes and borders and use block shading. These ASCIIs generally offer greater precision and attention to detail than fixed-width ASCIIs for a lower character count, although they are not as universally accessible since they are usually relatively font-specific.

In the CS lab at my college the desktop background was a variable width ASCII art of the school logo (green characters on a black background).
The best example I can find is at http://www.noah.org/wiki/ASCII_art if you scroll down to the bottom.


RE: Is this a joke
By JasonMick (blog) on 2/14/2012 9:26:37 PM , Rating: 1
quote:
This article/blog post is basically an advertisement for how dumb you are. Of coarse you must use a fixed width font to display ascii art. Any proportional font will ruin ascii art.

I can tell through your writing how proud of yourself you are that you "figured" this out all by yourself. If you had taken 2.2 seconds to look at the gamefaqs page you would see the faq content is placed inside an html <pre> tag. That means the enclosed text is pre -formatted and directs the browser to render it using a fixed width font.

Thank you for showering us with your golden knowledge oh sage one.

As you may have ascertained I don't make webpages for a living and my HTML coding is a bit rusty (though) I have done it before.

But I must point out that despite all of your infinite wisdom that you so kindly bestowed on us lowly peons it appears that you are mistaken... as the other op mentioned...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . _,,,--~~~~~~~~--,_ . . . . . . . . .
. . . . . . . . . . . . . . ,-‘ : : : :::: :::: :: : : : : :º ‘-, . . . . . . . . . . . .
. . . . . . . . . . . . . . ,-‘ : : : :::: :::: :: : : : : :º ‘-, . . . . . . . . . . . .
. . . . . . . . . . . . .,-‘ :: : : :::: :::: :::: :::: : : :o : ‘-, . . . . . . . . . .
. . . . . . . . . . . ,-‘ :: ::: :: : : :: :::: :::: :: : : : : :O ‘-, . . . . . . . . .
. . . . . . . . . . . ,-‘ :: ::: :: : : :: :::: :::: :: : : : : :O ‘-, . . . . . . . . .
. . . . . . . . . .,-‘ : :: :: :: :: :: : : : : : , : : :º :::: :::: ::’; . . . . . . . .
. . . . . . . . .,-‘ / / : :: :: :: :: : : :::: :::-, ;; ;; ;; ;; ;; ;; ;\ . . . . . . . .
. . . . . . . . .,-‘ / / : :: :: :: :: : : :::: :::-, ;; ;; ;; ;; ;; ;; ;\ . . . . . . . .
. . . . . . . . .,-‘ / / : :: :: :: :: : : :::: :::-, ;; ;; ;; ;; ;; ;; ;\ . . . . . . . .
. . . . . . . . .,-‘ / / : :: :: :: :: : : :::: :::-, ;; ;; ;; ;; ;; ;; ;\ . . . . . . . .
. . . . . . . . /,-‘,’ :: : : : : : : : : :: :: :: : ‘-, ;; ;; ;; ;; ;; ;;| . . . . . . .
. . . . . . . . /,-‘,’ :: : : : : : : : : :: :: :: : ‘-, ;; ;; ;; ;; ;; ;;| . . . . . . .
. . . . . . . /,’,-‘ :: :: :: :: :: :: :: : ::_,-~~,_’-, ;; ;; ;; ;; | . . . . . . .
. . . . . _/ :,’ :/ :: :: :: : : :: :: _,-‘/ : ,-‘;’-‘’’’’~-, ;; ;; ;;,’ . . . . . . . .
. . . ,-‘ / : : : : : : ,-‘’’ : : :,--‘’ :|| /,-‘-‘--‘’’__,’’’ \ ;; ;,-‘ . . . . . . . .
. . . \ :/,, : : : _,-‘ --,,_ : : \ :\ ||/ /,-‘-‘x### ::\ \ ;;/ . . . . . . . . . .
. . . . \/ /---‘’’’ : \ #\ : :\ : : \ :\ \| | : (O##º : :/ /-‘’ . . . . . . . . . . .
. . . . /,’____ : :\ ‘-#\ : \, : :\ :\ \ \ : ‘-,___,-‘,-`-,, . . . . . . . . . . .
. . . . ‘ ) : : : :’’’’--,,--,,,,,,¯ \ \ :: ::--,,_’’-,,’’’¯ :’- :’-, . . . . . . . . .
. . . . .) : : : : : : ,, : ‘’’’~~~~’ \ :: :: :: :’’’’’¯ :: ,-‘ :,/\ . . . . . . . . .
. . . . .\,/ /|\\| | :/ / : : : : : : : ,’-, :: :: :: :: ::,--‘’ :,-‘ \ \ . . . . . . . .
. . . . .\\’|\\ \|/ ‘/ / :: :_--,, : , | )’; :: :: :: :,-‘’ : ,-‘ : : :\ \, . . . . . . .
. . . ./¯ :| \ |\ : |/\ :: ::----, :\/ :|/ :: :: ,-‘’ : :,-‘ : : : : : : ‘’-,,_ . . . .
. . ..| : : :/ ‘’-(, :: :: :: ‘’’’’~,,,,,’’ :: ,-‘’ : :,-‘ : : : : : : : : :,-‘’’\\ . . . .
. ,-‘ : : : | : : ‘’) : : :¯’’’’~-,: : ,--‘’’ : :,-‘’ : : : : : : : : : ,-‘ :¯’’’’’-,_ .
./ : : : : :’-, :: | :: :: :: _,,-‘’’’¯ : ,--‘’ : : : : : : : : : : : / : : : : : : :’’-,
/ : : : : : -, :¯’’’’’’’’’’’¯ : : _,,-~’’ : : : : : : : : : : : : : :| : : : : : : : : :
. : : : : : : :¯’’~~~~~~’’’ : : : : : : : : : : : : : : : : : : | : : : : : : : : :

"It's a trap!!!"

Variable width Ackbar!

Who's advertising how dumb they are now, sucker?

At least I, unlike yourself, don't try to brag about how great I am (and get things wrong in the process). I freely admit that my coding knowledge -- web or otherwise -- is a work in progress. If you don't like the blog don't read it.


RE: Is this a joke
By adiposity on 2/15/2012 12:11:50 PM , Rating: 2
In fairness to the flamer, though, variable width ASCII art is a rarity, and even the page Ackbar comes from, mentions that it is unusual.

It's less about HTML knowledge and more about ASCII art knowledge. Since ASCII dates to back to non-gui times, when all fonts were fixed width, it stands to reason only a fixed width font would probably render (standard) ASCII art. The Arial Ackbar stands as an impressive exception to the rule, but still an exception.

Unfortunately, ASCII art isn't very good today on the web even in a fixed width font, because the second half of the font (PC-8 typeset) is missing. You have to get a flash or java renderer to truly appreciate what you can get with raster fonts (Fixedsys.fon font on windows).


RE: Is this a joke
By dasgetier on 2/17/2012 7:34:04 AM , Rating: 2
It seems that only older folks or developers are immediately aware of the difference between fixed and variable width fonts.


RE: Is this a joke
By Trisped on 3/1/2012 7:16:53 PM , Rating: 2
I think it is natural that most people do not realize there is a difference unless they experienced the change from fixed to variable (old computer users) or need it (I couldn't program as quickly without the characters lining up nice).


RE: Is this a joke
By andjohn2000 on 2/23/2012 8:08:29 AM , Rating: 1
I seem to agree too that this article/blog post is like an advertisement of how dumb the author is.

There is nothing special that ascii art must use fixed size fonts like courier new or monospace.

I don't know why the author looks so proud on knowing/figuring out this kind of very simple thing.


"I modded down, down, down, and the flames went higher." -- Sven Olsen

Related Articles












botimage
Copyright 2013 DailyTech LLC. - RSS Feed | Advertise | About Us | Ethics | FAQ | Terms, Conditions & Privacy Information | Kristopher Kubicki