By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,677 Members | 1,094 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,677 IT Pros & Developers. It's quick & easy.

Stretching/compressing line of asterisks

P: n/a
Say I wanted to put a couple lines of asterisks between paragraphs, and have
it stretch the spaces so that it spanned 100% of the text-width, like this:

* * * * * * * *

Is there a way to do this in CSS? I don't want it to line break, just collapse
the spacing between the stars if the window gets narrower.

--
----------------------------------------------------------------------------
Kim Scarborough http://www.unknown.nu/kim/
----------------------------------------------------------------------------
"Those who 'abjure' violence can only do so because others are committing
violence on their behalf."
-- George Orwell
----------------------------------------------------------------------------

Jul 20 '05 #1
Share this Question
Share on Google+
22 Replies


P: n/a
Kim Scarborough <sl****@unknown.nu> wrote:
Say I wanted to put a couple lines of asterisks between paragraphs,
and have it stretch the spaces so that it spanned 100% of the
text-width, - -
Is there a way to do this in CSS?


I don't think so. You could affect the spacing using letter-spacing or
word-spacing properties, but they take length values. I can't see how
we could specify them so that the width is 100%.

But I would suggest some different approach. It seems that you wish to
use decorative divider. There are many approaches, including non-CSS
use of images and various CSS techniques, see e.g.
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html
http://www.cs.tut.fi/~jkorpela/html/alt.html#hr

Specifically, if your document content has a row of asterisks separated
by spaces, speech-based user agents will say something odd - unless
they are clever enough to say "twenty asterisks separated by spaces",
which I double. Using either an image (via <img>) or a background image
avoids this problem.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

P: n/a
> Specifically, if your document content has a row of asterisks separated
by spaces, speech-based user agents will say something odd - unless
they are clever enough to say "twenty asterisks separated by spaces",
which I doubt. Using either an image (via <img>) or a background image
avoids this problem.


Well, the only reason this is coming up is because I'm trying to do a
reasonably faithful XHTML version of Alice's Adventures in Wonderland (being
displeased for various reasons with the versions currently on the web. Carroll
used rows of asterisks to indicate transitions at various points, and the
typesetters of a given edition will set the number of asterisks to fill
whatever column length they're using. I thought that maybe I could do
something like this as a reasonable equivalent:

SPAN.stretch {text-align: justify; width: 100%}
....
<span class="stretch">* * * * *</span>

But obviously, that doesn't work as I intended.

I suppose I could do a picture of asterisks, but it wouldn't match the font
then. Probably I'll just do a centered <pre> block and not worry about it
stretching out.

--
----------------------------------------------------------------------------
Kim Scarborough http://www.unknown.nu/kim/
----------------------------------------------------------------------------
"Those who 'abjure' violence can only do so because others are committing
violence on their behalf."
-- George Orwell
----------------------------------------------------------------------------

Jul 20 '05 #3

P: n/a
> Kim, if you like mine, you can use it:

http://www.bookstacks.org/carroll/alice/chapters.html


Thanks, but... "what is the use of a book... without pictures"?

--
----------------------------------------------------------------------------
Kim Scarborough http://www.unknown.nu/kim/
----------------------------------------------------------------------------
"Those who 'abjure' violence can only do so because others are committing
violence on their behalf."
-- George Orwell
----------------------------------------------------------------------------

Jul 20 '05 #4

P: n/a
In article <bf**********@bob.news.rcn.net>, Kim Scarborough wrote:
Specifically, if your document content has a row of asterisks separated
by spaces, speech-based user agents will say something odd - unless
they are clever enough to say "twenty asterisks separated by spaces",
which I doubt. Using either an image (via <img>) or a background image
avoids this problem.

Also, content property of CSS is handy, but not supported by IE. I would
do it that way anyway.

html > body hr {border:0;}
hr:before {width:80ex;letter-spacing:5ex;text-align:center;content:"* * *
* * *";}

Or something like that.
Well, the only reason this is coming up is because I'm trying to do a
reasonably faithful XHTML version of Alice's Adventures in Wonderland (being
displeased for various reasons with the versions currently on the web. Carroll
used rows of asterisks to indicate transitions at various points, and the
typesetters of a given edition will set the number of asterisks to fill
whatever column length they're using. I thought that maybe I could do
something like this as a reasonable equivalent:
But, you are doing it on WWW, not for book. And I bet Carrol used
asterisk because her typewriter didn't have any better for that.
SPAN.stretch {text-align: justify; width: 100%}
...
<span class="stretch">* * * * *</span>

But obviously, that doesn't work as I intended.

I suppose I could do a picture of asterisks, but it wouldn't match the font
then. Probably I'll just do a centered <pre> block and not worry about it
stretching out.


Pre block would not be good, as it won't use normal font. You can specify
that, but I don't it helps any.

Something to try, don't work as well on IE as in mozilla and opera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Test case </title>
<style type="text/css">
div {width:100%;letter-spacing:2em;
text-align:center;height:1em;overflow:hidden;display:ta ble;}
body > div {letter-spacing:normal;}
span {display:table-cell;text-align:center;}
</style>
<div><span>*</span><span>*</span><span>*</span><span>*</span>
<span>*</span><span>*</span></div>

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #5

P: n/a
> Kim, if you like mine, you can use it:

http://www.bookstacks.org/carroll/alice/chapters.html


Actually, to revisit this a bit more on-topic-ish:

You're dealing with Carroll's special formatting of poems, the mouse's tale,
and the address of Alice's foot by use of <pre> tags, as every HTML version
I've seen does. I don't want to do it this way, because the sudden switch to a
monospace font is jarring, and, more importantly, you have to guess at the
browser width. The goal is to have those blocks centered, but if you're using
<pre>, you can only make them X characters away from the left.

Here's how I'm dealing with it currently (I haven't gotten to the mouse's tail
yet):

P.poem {padding-left: 40%; white-space: pre; font-style: italic; clear: both}

....

<p class="poem">
Alice's Right Foot, Esq.
Hearthrug,
near the Fender,
(with Alice's love.)
</p>

(not that that's a poem, but I'll mainly be using this style for the poems.)

This isn't optimal, but it's the best I've got so far. The 40% from the left
will ensure that it appears roughly near the center, and the white-space will
keep Caroll's formatting.

My big gripe with it is the "clear: both", which I've put in to avoid having
the overlap floating images. It makes for big vertical whitespaces before
poems, which is ugly. Haven't found a better solution yet.

I guess what I want is to specify a box containing some text, center that box
relative to whatever images are there, have the box's width be no wider than
the longest text line in the box, and have the text left-justified and
pre-formatted *inside the box*. Does that make sense?

--
----------------------------------------------------------------------------
Kim Scarborough http://www.unknown.nu/kim/
----------------------------------------------------------------------------
"Those who 'abjure' violence can only do so because others are committing
violence on their behalf."
-- George Orwell
----------------------------------------------------------------------------

Jul 20 '05 #6

P: n/a
On Sat, 19 Jul 2003 17:12:31 -0500, Kim Scarborough
<sl****@unknown.nu> wrote:
http://www.bookstacks.org/carroll/alice/chapters.html


Thanks, but... "what is the use of a book... without pictures"?


I don't know. Because the pics might be copyrighted? Because I got it
off Gutenberg, and that's how it came?

Ian
--
http://www.aspipes.org/
http://www.bookstacks.org/
Jul 20 '05 #7

P: n/a
On Sat, 19 Jul 2003 17:47:35 -0500, Kim Scarborough
<sl****@unknown.nu> wrote:
You're dealing with Carroll's special formatting of poems, the mouse's tale,
and the address of Alice's foot by use of <pre> tags, as every HTML version
I've seen does.


Well, if you find an answer, let me know (if you're willing to share
it, of course.) One of my volunteers did that book, and, not wanting
to spend much time on it (since that's why I let someone else do it),
I just fixed a few errors and left it as is.

Ian
--
http://www.aspipes.org/
http://www.bookstacks.org/
Jul 20 '05 #8

P: n/a
On Sat, 19 Jul 2003 17:12:31 -0500, Kim Scarborough
<sl****@unknown.nu> wrote:
Thanks, but... "what is the use of a book... without pictures"?


Actually, if you find some public domain illustrations for Alice, and
you'd be willing to share your find, let me know. I'm doing Anna
Karenina right now, and won't be going back to that book at all, sad
to say. (Not that I really worked on it anyway. My buddy Chris (from
the "Axis of Ians") did all the work.)

Ian
--
http://www.aspipes.org/
http://www.bookstacks.org/
Jul 20 '05 #9

P: n/a
Kim Scarborough <sl****@unknown.nu> wrote:
I suppose I could do a picture of asterisks, but it wouldn't match the font
then.
Why should it?
Probably I'll just do a centered <pre> block and not worry about it
stretching out.


The asterisk's are decoration, not content. Follow Jukka's advice, it's
the only way to do this properly.
Headless

Jul 20 '05 #10

P: n/a
In article <bf**********@bob.news.rcn.net> in
comp.infosystems.www.authoring.stylesheets, Kim Scarborough
<sl****@unknown.nu> wrote:
Well, the only reason this is coming up is because I'm trying to do a
reasonably faithful XHTML version of Alice's Adventures in Wonderland (being
displeased for various reasons with the versions currently on the web. Carroll
used rows of asterisks to indicate transitions at various points,


Did Carroll use them, or did his printer select them? I rather
suspect this varies between editions, so you are free to choose
anything you like.

In my edition /The Annotated Alice/, the first transition I happened
to see just now was near the end of "It's My Own Invention" and
looked like this:

* * * * *
* * * *
* * * * *

a total of fourteen asterisks in a 5-4-5 arrangement.
--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #11

P: n/a
In article <bf**********@bob.news.rcn.net>, sl****@unknown.nu says...
Say I wanted to put a couple lines of asterisks between paragraphs, and have
it stretch the spaces so that it spanned 100% of the text-width, like this:

* * * * * * * *

Is there a way to do this in CSS? I don't want it to line break, just collapse
the spacing between the stars if the window gets narrower.

Further to other suggestions, would something simple like:

http://porjes.com/alice.html

do?

Jul 20 '05 #12

P: n/a
Kim Scarborough <sl****@unknown.nu> wrote in message
news:<bf**********@bob.news.rcn.net>...
Say I wanted to put a couple lines of asterisks between paragraphs, and have
it stretch the spaces so that it spanned 100% of the text-width, like this:

* * * * * * * *

Is there a way to do this in CSS? I don't want it to line break, just collapse
the spacing between the stars if the window gets narrower.


Here's another idea. This one has obvious accessibility and degradability
issues, but maybe you'll get a good idea out of it:

<Div style="word-spacing:3em; text-align:center;
width:100%; height:1em; overflow:hidden;">
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
</Div>
Jul 20 '05 #13

P: n/a
In article <6d********************************@4ax.com> in
comp.infosystems.www.authoring.stylesheets, Headless
<in*************@dna.ie> wrote:
The asterisk's are decoration, not content.


http://www.angryflower.com/worlds.gif

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #14

P: n/a
Kim Scarborough tat kund:
Say I wanted to put a couple lines of asterisks between paragraphs, and
have it stretch the spaces so that it spanned 100% of the text-width,
like this:

* * * * * * * *

Is there a way to do this in CSS?


<div class="asteriks"><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b></div>

..asteriks b {
float:left;
display:block; /* Mozilla needs some redundance... */
width:12.5%;
height: 20px;
background: url(/img/asteriks.gif) center center transparent;
}

Not even nice markup, but slim and without any harm for blind users. :)

Thomas

Jul 20 '05 #15

P: n/a
Stan Brown <th************@fastmail.fm> wrote:
The asterisk's are decoration, not content.


http://www.angryflower.com/worlds.gif


Pardon?
Headless

Jul 20 '05 #16

P: n/a
Headless wrote:
Stan Brown <th************@fastmail.fm> wrote:
The asterisk's are decoration, not content.


http://www.angryflower.com/worlds.gif


Pardon?


I think it's a comment on the use of the apostrophe in "asterisk's"

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.
Jul 20 '05 #17

P: n/a
Headless <in*************@dna.ie> wrote:
spell checker


Bother, spelling checker ;-)
Headless

Jul 20 '05 #18

P: n/a
In article <ja********************************@4ax.com> in
comp.infosystems.www.authoring.stylesheets, Headless
<in*************@dna.ie> wrote:
"asterisk's" as a plural
I beg to differ, but after reading PeterMcC's comment I now understand
that you were playing online spell checker, sad.


Are you saying that it is too difficult for you to follow standard
usage of making a plural without an apostrophe? _That's_ sad.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #19

P: n/a
"Stan Brown" <th************@fastmail.fm> wrote in message
news:MP***********************@news.odyssey.net...
In article <bf**********@bob.news.rcn.net> in
comp.infosystems.www.authoring.stylesheets, Kim Scarborough
<sl****@unknown.nu> wrote:
Well, the only reason this is coming up is because I'm trying to do a
reasonably faithful XHTML version of Alice's Adventures in Wonderland (beingdispleased for various reasons with the versions currently on the web. Carrollused rows of asterisks to indicate transitions at various points,


Did Carroll use them, or did his printer select them? I rather
suspect this varies between editions, so you are free to choose
anything you like.

In my edition /The Annotated Alice/, the first transition I happened
to see just now was near the end of "It's My Own Invention" and
looked like this:

* * * * *
* * * *
* * * * *

a total of fourteen asterisks in a 5-4-5 arrangement.

In the Modern Library edition (the low-cost solution),
they use large dots instead of asterisks.
The number varies -- sometimes 5-4-5, sometimes 6-5-6.

In Through the Lookinglass, there is a transition every time
she goes from one row of the chess board to another.
In Wonderland, the transitions are pseudo-random: there is one
when she eats the mushroom, and maybe two more that I can see
on a quick scan.

You could find a copy of the original manuscript to count the actual
asterisks (or dots). But it appears that *real* publishers don't
worry about things like this.

My vote: declare it tabular data.

P.S.
"(I haven't gotten to the mouse's tail yet)"
I would have started there. That's the fun part.

--
Steve

Jul 20 '05 #20

P: n/a
"Steven Dilley" <st***********@compuware.com> wrote:
In Through the Lookinglass, there is a transition every time
she goes from one row of the chess board to another.
In Wonderland, the transitions are pseudo-random


But in any case, the asterisk patterns, or whatever, _mean_ something.
They are not textual content, but they indicate transitions. There's
really only one HTML construct that corresponds to this meaning at all,
namely <hr>, which was originally defined as meaning 'change of topic'
but named after 'horizontal rule' - with an accompanying statement
saying that speech browsers could render it as a pause. It's not
optimal markup of course, but the best we can do, and in non-CSS
browsing situations, it gives _some_ indication of some major division
point.

Thus, the correct CSS question is IMHO: How do I style an <hr> element
so that instead of a horizontal line, a pattern of asterisk symbols (or
something like that) appears?

An obvious (?) approach is to create the symbol pattern as an image and
use something like

hr { display: block;
height: 50px;
width: 100%;
background: url(stars.gif) center center no-repeat;
border: none; }

But there are at least two problems:
1. IE seems to draw a border still. Maybe due to the idiosyncracies of
<hr> implementation.
2. When images are not displayed (including many printing situations),
nothing appears except empty spacing.
However, problem 1 partly solves problem 2, since the bordered box
probably conveys some idea of a major division point. :-)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #21

P: n/a
In article <7v********************************@4ax.com>, Ian Rastall <id*******@earthlink.net> writes:
On Sat, 19 Jul 2003 17:12:31 -0500, Kim Scarborough <sl****@unknown.nu> wrote:
http://www.bookstacks.org/carroll/alice/chapters.html


Thanks, but... "what is the use of a book... without pictures"?


I don't know. Because the pics might be copyrighted?


Tenniel's pictures are long out of copyright. (You did realize that
sluggo was quoting the first chapter of _Alice in Wonderland_, didn't you?)

--
Michael F. Stemper
#include <Standard_Disclaimer>
Visualize whirled peas!

Jul 20 '05 #22

P: n/a
In article <MP************************@news.cis.dfn.de>,
la***@raittila.cjb.net says...
In article <20***********************@mickey.empros.com>, Michael Stemper
wrote:
But, you are doing it on WWW, not for book. And I bet Carrol used
asterisk because her typewriter didn't have any better for that.

When Lewis Carroll wrote _Alice in Wonderland_ in
1865, *he* did not have a typewriter. The reason that *he* did not have
a typewriter is that it was a few years before its invention. (Sholes
patented it in 1868.)


So, makes even more likely that use of asterisk was because there was no
better? I think that at that time there were no printing machines that
would have had better, whitout great problems? Not that I know if
printing machines had asterisk then either.

Certainly - if you look at a good edition of Tristram Shandy (1759)
you'll find all sorts of typographical trickery .
Jul 20 '05 #23

This discussion thread is closed

Replies have been disabled for this discussion.