css question

[skil-phil]

Just tried Brett Markey's suggestion (#3).
It does exactly what I want.
Thanks Brett.

[JSWolf]

Originally Posted by skil-phil

Just tried Brett Markey's suggestion (#3).
It does exactly what I want.
Thanks Brett.

Is this for a personal book or a book for sale?

[skil-phil]

Personal.
What's the difference?

[JSWolf]

Originally Posted by skil-phil

Personal.
What's the difference?

The difference is how you do the code. For personal you do what you want that works. For sale, you do what works best in most cases. For example, you do not use pseudo code but instead do <span> in a book for sale because the <span> is the most compatible.

[theducks]

Originally Posted by skil-phil

Personal.
What's the difference?

Personal: Anything that floats your boat goes.
Distribution (commercial): Standby for "won't work on my X" RETURNS

[skil-phil]

Thanks, understand the difference.

[JSWolf]

If you are selling, you have to use the simplest most compatible code possible.

[thiago.eec]

Originally Posted by Brett Merkey

Yes, it is possible to use CSS to insert text into content. Use a pseudo-element.

Example:


Then insert <p class="scenebreak"></p> in the desired place.

To make your code more semantic, you should use <hr/>. The hr element is meant for scene breaks.

hr.scenebreak:before {
  content: "* * * ";
}

[Brett Merkey]

Yes, I prefer to use hr as well. I read that screen-readers prefer it. In fact, I don't even bother giving the horizontal rule a class. I answered the OP without bringing up these secondary issues.

To be clear however, when using the horizontal rule to do that job, it is best to keep things simple and not bother combining it with the pseudo-element technique.

[thiago.eec]

Originally Posted by Brett Merkey

To be clear however, when using the horizontal rule to do that job, it is best to keep things simple and not bother combining it with the pseudo-element technique.

HTML elements and CSS styling are two different things.

The proper HTML element to create a thematic breaks is hr. Assistive technologies will understand that. If you use a p or a div, AT may try to read it (if 'content' is present).

As for styling, you can decide. On most (all?) browsers and reading systems, if no CSS is applied, then you have a horizontal rule for the hr element. But you can style it differently, without loosing the correct semantic.

[JSWolf]

I use a 20% wide 2px line for a section break. I use <hr/> for that. The CSS has the code for the space above and below the line. It works rather well. And it looks so much better then *** or * * *. IMHO, the asterisks look tacky.

[Quoth]

Originally Posted by JSWolf

IAnd it looks so much better then *** or * * *. IMHO, the asterisks look tacky.

At least you admit it's your opinion. I think a full width <hr /> is tacky, IMO, a centred 25% wide is better (via CSS).

But the three * * * (a flat asterism) is traditional. The hr line is a web originated thing.

[Brett Merkey]

Suspecting that asterism was being used incorrectly, I looked it up:
https://en.wikipedia.org/wiki/Asterism_%28typography%29

The thing we are discussing is actually called a dinkus. (!)
This word looks somewhat risqué and probably should not be used in polite society.

Learn something new every day...

[Brett Merkey]

I don't like those tacky asterisks either. I use a lozenge-shaped visual:

hr {
border: 0.2em double midnightblue;
border-radius: .2em;
margin: .75em auto;
text-align: center;
width: 20%;
}

[BetterRed]

Originally Posted by Brett Merkey

Suspecting that asterism was being used incorrectly, I looked it up:
https://en.wikipedia.org/wiki/Asterism_%28typography%29

The thing we are discussing is actually called a dinkus. (!)
This word looks somewhat risqué and probably should not be used in polite society.

Learn something new every day...

To dink is to give someone a ride on the crossbar of your bicycle. So, dinkus would be a request to give the two of us a dink on your bike.

Syntaxes all of us, and semantic is not a noun.

BR