View Single Post
Old 01-31-2024, 10:09 AM   #10
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,118
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by paperwhite13 View Post
...

I could go back to InDesign and map the text styles properly, but I've made some edits in the epub directly, so I’d rather make the changes here, and I guess that’s what I was asking in the first place -- if it’s possible to change the relevant p classes to h1, h2 etc.
Yes, it is absolutely possible...and highly encouraged! Just remember to add the appropriate css for the h1, h2 to your stylesheet. This is where strong reg-fu comes in handy!

Quote:
Originally Posted by paperwhite13 View Post
I have to say I am less concerned with accessibility at the moment (there are almost no rules or laws to support it in my region and ebook market is shrinking anyway here), and more with wider compatibility, although I understand they go hand in hand. I don’t want to pick up bad habits, of course, but if using <em> everywhere instead of <i> or <span class="italic"> gets me wider compatibility, that’s what I'm after at the moment, even if in some places italic would be semantically correct instead of emphasis.
Understandable. I'm not sure what region you are in, but there are some regions that have already passed laws, like Europe, that mandate accessibility. If your book is going to one of the big distributers (Amazon, Kobo, etc) then they will probably require it. Luckily some enterprising programmers around here have created a plugin to automagically fix a lot of those accessibility concerns. If you use Sigil to edit your ePub then here is the link to that plugin.


Quote:
Originally Posted by paperwhite13 View Post
I usually use a dinkus (* * *) for a section break, what would the semantically correct way to tag this? The little accessibility reading I've done suggests mapping this to <hr>, which would explain why many ebooks I've read have both a horizontal line, and a fleuron -- which I find a little annoying, strictly from a presentation point
<hr/> is the recommended method. I can only blame the programmers for showing both a line and the dinkus (didn't know it was called that!! ). Either the device/app programmers for not making their device function properly, or the book coder for not putting the proper css on their stylesheet.

Here is the method I use and I haven't seen it display both on my readers.

Spoiler:
Code:
Adjust the image, margin, height, and letter spacing as desired
CSS:
hr {border:none; margin:1em auto; text-align:center; letter-spacing:1em}

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

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

hr.ChDiv4:after {content:'♥♥♥'}


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>


Click image for larger version

Name:	Screenshot 2024-01-31 100255.png
Views:	71
Size:	70.1 KB
ID:	206135

Edit:
The slight offset from center you see with the fleuron is because, in this example, I left the letter-spacing for all <hr>s. If you use a fleuron image, just remove the letter-spacing and the image will be perfectly centered.

Last edited by Turtle91; 01-31-2024 at 10:27 AM.
Turtle91 is online now   Reply With Quote