Half Space Technique for html art
From Pete Casso <pet...@sympatico.ca>
· alt.ascii-art
· 19 Apr 1998 00:00 · View full thread
· report
There have been quite a few html discussions recently ;-)) and html
artists may be interested in the following, half space technique.
There will be many instances in generating _ascii_ art, where we would
like to position a character in a half space location, but that is
simply not possible with monospace font and pure ascii, i.e. the
location of characters on a line will be integer multiples of character
width.
However, the following _html_ technique allows one to position monospace
font in half space locations. The heart of the idea is that all web
browsers are able to center the display of a line of text. The basic
html coding technique will be explained by way of example, using the
html tags <PRE>, <CENTER>, and <TT>, see the html code snippet below.
Look at the html code snippet below with an html capable newsgroup
reader or copy the html code snippet in a text file and open the text
file with your web browser. You will see, that lines 01 to 03 show my
beloved Frogstein in his basic position, lines 05 to 07 show him with
his eyes moved forward by half a space, lines 09 to 11 show him with his
eyes moved backward by half a space.
The way for moving the eyes forward or backward by half a space is
extremely simple. In line 05, you only need to add a single space to the
left of Frogstein eyes. The total line length increases by one space,
but since the web browser centers the display, the eyes are moved
forward by only half a space. Similarly, in line 09 you add a single
space to the right of Frogstein eyes, and the web browser moves the eyes
backward by half a space.
In larger/wider pieces of html art, you may want to do half space
shifting more than once in a single line. In this case you need to pay
attention to the fact that inserting a single space will always:
=> shift all characters to the right of the insertion point by half a
space to the right;
=> _and also_ shift all characters to the left of the insertion point by
half a space to the left.
Say, that you want to maintain the position of the characters to the
left of the insertion point. What you then need to do is to add a single
space at the beginning of that line. You need to do some diddling, but
you will always be able to position characters in half space locations.
A detail comment: the <TT> tag, i.e. TeleType tag, may be superfluous
for some web browsers, but some web browsers may need it for correct
display of html (and ascii) art. In the context of this article, there
is an additional reason for using the <TT> tag: in diddling half spaces
and adding single spaces as you work, you may want to keep track of your
line lengths as part and parcel of clean workmanship.
In summary, this article describes a technique to position characters in
half space locations, an additional tool for the html artist. The heart
of the idea is to utilize the ability of web browsers to center the
display of a line of text. The basic html coding technique is provided.
For further examples on what can be achieved with this half space
technique, see my website and look carefully at the positioning of
characters in the pics, the URL of my website is in my sig. True, I have
converted all of my pics into gif and other file formats for a variety
of reasons, but I used to have my pics on the web in ascii and html
;-))
<HTML>
<BODY>
<PRE><CENTER>
Half Space Technique for html art
<TT>01 .oo </TT>
<TT>02 ( -) </TT>
<TT>03 " " </TT>
<TT>04 </TT>
<TT>05 .oo </TT>
<TT>06 ( -) </TT>
<TT>07 " " </TT>
<TT>08 </TT>
<TT>09 .oo </TT>
<TT>10 ( -) </TT>
<TT>11 " " </TT>
</CENTER> </PRE>
</BODY>
</HTML>
Wow! Supreme html Magic!
Original message headers
X-Google-Language: ENGLISH,ASCII-7-bit X-Google-Thread: f996b,d3482ad08f1ab34c,start X-Google-Attributes: gidf996b,public From: Pete Casso <pet...@sympatico.ca> Subject: Half Space Technique for html art Date: 1998/04/19 Message-ID: <353...@sympatico.ca>#1/1 X-Deja-AN: 345511464 Content-Transfer-Encoding: 7bit MIME-Version: 1.0 NNTP-Posting-Date: Sat, 18 Apr 1998 21:44:38 EDT Content-Type: text/plain; charset=us-ascii Newsgroups: alt.ascii-art
Related ASCII art in the Gallery
Explore these categories from our collection of 11,000+ artworks:
|\/\/\/| | | | | | (o)(o) C _) | ,___| | / /____\
|HHHHH/"\"\HHHHHHH| |HH`\|_.-)'|/'dP,H| |Hb.`\\_/_//'.oddH| |HHHb|`.\/\,'|HHHH| |HHHHHb/\/\/|HHHHH| |"""""""""""""""""| | |"" /\ \ / |"" | | |__/--\ \/ __| |
_________
/___ ___\
//@@@\ /@@@\\
\\@@@/ \@@@//
\___ " ___/
| - |
\_/ jrjc ______
/|_||_\`.__
( _ _ _\
=`-(_)--(_)-'
hjw .="=. _/.-.-.\_ ( ( o o ) ) |/ " \| \'---'/jgs /`"""`\\
_________ | _____ |\ | |\ ___| | \ | | | | | | | | |___| | | \ | |____\| | \|_________| Andy Johnson
Make your own ASCII art
Turn images, text or 3D into ASCII, or draw your own – right in your browser.
About this message.
This message was posted publicly to the newsgroup
alt.ascii-art
in 1998 and is mirrored here unchanged as part of the Historic Archives – only email addresses are masked.
The artwork and text belong to their original authors: if you copy a piece, keep the artist's initials or signature intact and credit them where you can.
Are you the author? Contact us to get your posts attributed, connected to your artist profile, or removed.
Report this message
Help us keep the archive clean and accurate. Reports are reviewed by a person – nothing is changed automatically.