View Single Post
Old 08-07-2024, 08:57 AM   #7
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,363
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
I think letter-spacing adds that padding after each letter (not just between letters as is commonly understood) and that would be left or right of the letter based on the reading direction (rtl/ltr) of the language. The only time that is really noticeable is in this particular scenario where you are trying to center something.

When trying to control the spacing in a divider I've found that using word-spacing is more predictable than letter-spacing. You just need to add a space between each character to delineate the 'word'.
<div>*_*_*</div> ( _ means space )


However....
I would recommend using the horizontal rule <hr/> for chapter dividers, not <div>s. The accessibility standard requires the hr so that reading systems can tell when there is a break. It is really easy to style the hr... Yes I know that sounds weird but it is very simple to style the tag to show images and characters not just line height/width/thickness.

Here are a couple examples of using an image as well as characters and using word spacing for comparison:
Click image for larger version

Name:	Screenshot 2024-08-07 084017.png
Views:	103
Size:	37.3 KB
ID:	210005
Code:
CSS:
div {text-align:center; word-spacing:1.5em}

hr {border:none; margin:1em 0; text-align:center; word-spacing:1.5em}

/* using an image fleuron*/
hr.ChDiv1 {
  height:2em;
  background: transparent url("../Images/img_ChDiv.svg") no-repeat center;
  background-size: auto 100%;  
}
/* using symbols*/
hr.ChDiv2::after {content:'◆◆◆◆◆'}

hr.ChDiv3::after {content:'* * *'}

hr.ChDiv4::after {content:'♥♥♥'}
Code:
HTML:
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <hr class="ChDiv1"/>

  <p>Suspendisse fermentum nec mauris sit amet laoreet.</p>

  <hr class="ChDiv2"/>

  <p>Phasellus nec lorem dignissim, sodales lorem ac, luctus nulla.</p>

  <hr class="ChDiv3"/>

  <p>Donec viverra ut sem at ornare. Fusce neque augue, dignissim.</p>

  <hr class="ChDiv4"/>

  <p>Sed vehicula massa id vulputate mollis.</p>

  <div>♥ ♥ ♥</div>
edit: added colors to make it pretty

Last edited by Turtle91; 08-07-2024 at 09:06 AM.
Turtle91 is offline   Reply With Quote