Section divider problem.

[pargoo]

After deciding I'd use something different from the standard three asterixes for section breaks, I took the advice on the Sigil Tutorial and tried this:

<hr width="10%" color="#000000">

My first attempt gave me an immediate error, which I allowed Sigil to auto-correct into:

<hr color="#000000" width="10%" />

I now have nice solid black lines centered where I want them, but today a test-run of Flightcrew returned the following errors:

'attribute 'color' is not declared for element 'hr', and
'attribute 'width' is not declared for element 'hr'

Apparently I have to replace one or both of these attributes via CSS using 'color' and 'background-color' properties, but how exactly?
Thanks.

[Jellby]

<hr class="sectionbreak"/>

and in the CSS code:

hr.sectionbreak {
  color: #000000;
  width: 10%;
  margin: 1em 45%;
}

(the "1em" part you can change it to whatever you want, the "45%" part ensures that the rule will be centered: 45+10+45=100)

[RbnJrg]

Originally Posted by pargoo

After deciding I'd use something different from the standard three asterixes for section breaks, I took the advice on the Sigil Tutorial and tried this:

<hr width="10%" color="#000000">

My first attempt gave me an immediate error, which I allowed Sigil to auto-correct into:

<hr color="#000000" width="10%" />

I now have nice solid black lines centered where I want them, but today a test-run of Flightcrew returned the following errors:

'attribute 'color' is not declared for element 'hr', and
'attribute 'width' is not declared for element 'hr'

Apparently I have to replace one or both of these attributes via CSS using 'color' and 'background-color' properties, but how exactly?
Thanks.

Maybe you could find useful these threads:

<hr> as section separator?

Dividers and fleurons

Regards
Rubén

[pargoo]

Jellby: tried your suggestion:

hr.sectionbreak {
color: #000000;
width: 10%;
margin: 1em 45%;
}



I have a centered line, but it's that 3D-looking grey line, not solid black, so the hex value is not being respected(?)

[Toxaris]

Add 'border: 0;' to the CSS and perhaps 'background-color: #000000;'.

Be aware that the lines will not show on readers that allow a 'night vision'. In those modes the colors of the text is rendered white and the background black, as long as there is no color set. So, in this case it would remain black.
If you only want black lines, ditch the colors.

[Jellby]

Different renderers apparently draw the rules differently. Some may use foreground color, some background color, some have a default border (to make them look 3D), etc. This makes it a little bit harder to override all the defaults. Try Toxaris's suggestions.

[GrannyGrump]

Jellby said:

Some may use foreground color, some background color,

That's interesting, I thought they by default matched the font/foreground color, so I never set a color at all. Maybe some of my hr's are not showing up in night mode.

I usually use something like:

hr.sectionbrk {
width: 20%;
margin: 1em 40%;
border: solid 2px;
}

[Toxaris]

That could work fine in most readers, including in night mode. Although I would probably use 'border: 0px;' and 'height: 2px;' in this case.

[pargoo]

Thank you, guys: thumbsup:. After a bit of playing around I settled on this to display the black line I was after:

hr.sectionbreak {
color: #000000;
width: 10%;
border: solid 1px;
margin: 1em 45%;
}

'border 0' made the existing line vanish - or become white(?), and 2px was too thick, but 1px looks fine; 'backgroundcolor' doesn't seem to do anything.

[pargoo]

Actually, I was premature. I suspected a different environment might make a difference regarding how 'color' and 'background-color' express themselves. With 'background-color' in my css, the line generated looks grey/3D in a PC viewer, but when transferred to my Kindle it appears solid black as originally desired. There you go!

[Jellby]

The HR is basically a rectangle with a border. Default colours, as well as thickness of the rectangle and border settings my vary between renderers. You could try this (untested):

hr.sectionbreak {
  width: 10%;
  margin: 1em 45%;
  height: 0; /* invisible rectangle */
  border-width: 0 0 1px 0; /* only bottom border */
  border-style: solid; /* choose other styles if you want other than a continuous line */
}

I believe by default the border will be rendered in the text colour (black normally, white in "night mode", etc.), so it's better not to touch it, but if you want to specify the rule colour, use border-color.