Center Text AND Images Within ASP .NET

I recently integrated the handy AddThis sharing and analytics tool into an ASP .NET site I'm working on.

Whether due to peculiarities of the markup or browser idiosyncrasies, I couldn't get the widget consistently centered. The widget code lives in a div tag, and despite a popular few suggestions, I simply couldn't get things centered horizontally.

Centering text is no big deal; simply applying a CSS style usually does this well enough:


text-align: center;



Images, however, aren't accounted for by this markup. 

I ended up enclosing the widget in a Table control with the HorizontalAlign attribute specified to "Center", and this did the trick.

Centered!

Much easier to allow ASP .NET to handle the grunt work of emitting the necessary markup in this case than messing (directly) with styles.

ASCII Art

Here's a quick guide on how to create ASCII art in posts on sites like Reddit, forums, email and elsewhere.

ASCII art has been around for decades now. This site provides a very nice summation of the history of ASCII art, including its beginnings in hieroglyphics, monasteries, and finally on computer screens. You can find ASCII art online today in the form of emoticons, and also at various sites (like this one) that have compiled all kinds of ASCII art creations for your enjoyment.

Creating most ASCII art relies mainly on using a fixed-width font, such as Courier New. Doing so ensures that your work will look the same when rendered by the browser or email client or whatever medium as it does in whatever tool you're using to create it, because each character has a set width, a set number of pixels that it occupies.

Many text editing widgets on websites and email clients give you the option of picking what font to use. For purposes of ASCII art, pick a fixed-width font. Then, begin crafting your design. You can also simply copy-and-paste someone else's ASCII art, like this cupcake, for example, but if you do so, it's best to keep any attribution the artist might've tagged their creation with (thanks Krogg, whoever you are):

          )
         (.)
         .|.
         l7J
         | |
     _.--| |--._
  .-';  ;`-'& ; `&.
 & &  ;  &   ; ;   \
 \      ;    &   &_/
  F"""---...---"""J
  | | | | | | | | |
  J | | | | | | | F
   `---.|.|.|.---'
               Krogg


Many forums have a WYSIWYG text-editor that lets you pick from a variety of fonts. In those cases, you can typically create your art in any text editor (I use Notepad++) then copy-and-paste it into the forum's editor, and then highlight the text and then change the font to apply fixed-width formatting.

Email clients, too, usually have WYSIWYG editors. Microsoft Outlook, for example, can be configured to use Word to create emails, allowing for great flexibility in formatting. For email messages, you can simply configure your email client to use a fixed-width font like Courier New, or alternatively change the email format it uses to plain text, rather than HTML or Rich Text; by default many email clients will render incoming such email messages in a fixed-width font, saving you some guesswork about whether the ASCII art will appear as intended.

Specific to Reddit, their text editor doesn't let you choose what font to use, beyond the font selections you choose for your web browser, but they do enable you to use a fixed width font by preceding each line of text with four blank spaces. Users in the programming field will sometimes post programming code, and while this feature is particularly suited to that purpose, it can also help you break up an otherwise serious discussion with some frivolous ASCII art creation.

To reproduce the above cupcake ASCII art on Reddit, then, you'd simply copy-and-paste the above into a new post or comment on Reddit, then copy a set of four blank spaces and paste them in front of each line of the cupcake. Then when Reddit displays the text, it will apply formatting rules and display the cupcake in fixed width font for everyone's enjoyment. Here's an example.

Unfortunately, some sites like Facebook won't allow you to choose your own font, their text formatting is very limited. However, you could simply host either a plain ASCII text file or an HTML document on a free web host like Awardspace. Then, simply refer your friends to the URL for that page to show them your creation.

Pretty Formatting for XML or HTML

Sometimes it's helpful to pretty up XML or HTML in order to more easily analyze it. Many tools create machine-readable XML or HTML, which is well-suited to being parsed by computers, but whose formatting can be painful for a human to wade through. 

You might think, why do humans need to be able to work with machine-readable text, anyway? Well, if you happen to be the new guy on the job and get stuck with having to debug some code that spits out some XML or HTML you've never dealt with before for some complex data transformation processing, you can see why it might be necessary, particularly if something changes between the sender and receiver and the XML, as produced, no longer does the job.

In Notepad++, one of my favorite text editors, I can utilize the TextFX plugin to take a given chunk of XML or HTML and clean it up, neatly indenting the nodes and attributes for easier examination. I paste the text into the editor and select TextFX => TextFX HTML Tidy => TiDy clean document - wrap. Finally I select Language => XML or HTML to enable syntax highlighting.

Prior to discovering Notepad++, I had discovered the freeware MoreMotion XML Editor a few years ago when I was having to dissect some XML being output by a tool whose XML output I needed to clean up. Provided the XML was well-formed, I could very quickly pretty it up by clicking XML => Pretty Format, or even more easily with a quick key combo, Shift-Ctrl-P.

BEFORE: Messy, messy XML!

AFTER: Ahhh, clean, legible, structured XML.

Unfortunately, the original download URL for MoreMotion XML Editor appears to be defunct, leading to a parked page rather than the actual file. You can download MoreMotion's more comprehensive XML application suite here, but if you just need relatively simple XML editing provided by the older (and much smaller, around 1.3 MB) freeware tool, this working download link fits the bill. The ZIP file contains the EXE, which can be copied to a convenient folder and run.

A few caveats, however. MoreMotion seems to have a few editing issues with extremely long lines of text; you may notice keypresses on such lines may take a long time to register. Also, whereas Notepad++ will do its best to deal with poorly-formed XML or HTML and log any errors it encounters, MoreMotion will not allow you to proceed until the errors are resolved, and in my experience some of these errors can be difficult to pin down.

Nevertheless, for relatively small chunks of well-formed XML or HTML, MoreMotion XML Editor makes cleaning up XML or HTML just a few steps quicker than Notepad++.