correct interpretation of <br> with centred text

cybmole · 08-08-2014, 11:18 AM

i was reading a book in my latest tablet app- moon reader pro - & it seemed to be mangling some two-line headings-
So I returned to sigil to check book view & code:
in sigil book view, and in ADE, I see 2 lines of header, both centred,
and the code has the two lines wrapped in spans, with a
<br />
used to force a line break.
it is yucky code as there's also some a href stuff linking back to toc

but my issues is that moon reader displays it as
line 1 centred
line 2 left

whereas every other epub reader I try displays both lines as centered

so is there a relevant spec as to how it should render, or is there ambiguity

and - the hard sigil question now... is there an alternative to <br> that can be simply regexed into place that will keep both lines centered.

i kludged it with mutliple regex passes but ended up with wide spacing between the 2 header lines, as I forced them to be 2 x header lines of same class.

I can see this being an issue with other books in this reader. e.g. there could be a verse of poetry- cenetred - with <br> used to force the line breaks, and that would be even more of a pain to tweak if it came out as only the 1st line centered, the rest not centered

here's a snippet of the original crap (retail) code ( it's a Stephen King book
)

Code:

<body class="text" id="text">
  <div class="chapter" id="TOC-6">
    <h2 class="chp"><a href="../Text/wizardandglass_con01.html#TOCC-6"><span class="chapnum"><b>CHAPTER I</b></span><br />
    B<span class="largecap">ENEATH THE</span> D<span class="largecap">EMON</span> M<span class="largecap">OON</span> (I)</a></h2>

    <h3 class="sub1"><b>1</b></h3>

theducks · 08-08-2014, 11:37 AM

Quote:

Originally Posted by cybmole

i was reading a book in my latest tablet app- moon reader pro - & it seemed to be mangling some two-line headings-
So I returned to sigil to check book view & code:
in sigil book view, and in ADE, I see 2 lines of header, both centred,
and the code has the two lines wrapped in spans, with a
<br />
used to force a line break.
it is yucky code as there's also some a href stuff linking back to toc

but my issues is that moon reader displays it as
line 1 centred
line 2 left

whereas every other epub reader I try displays both lines as centered

so is there a relevant spec as to how it should render, or is there ambiguity

and - the hard sigil question now... is there an alternative to <br> that can be simply regexed into place that will keep both lines centered.

i kludged it with mutliple regex passes but ended up with wide spacing between the 2 header lines, as I forced them to be 2 x header lines of same class.

I can see this being an issue with other books in this reader. e.g. there could be a verse of poetry- cenetred - with <br> used to force the line breaks, and that would be even more of a pain to tweak if it came out as only the 1st line centered, the rest not centered

here's a snippet of the original crap (retail) code ( it's a Stephen King book
)

Code:

<body class="text" id="text">
  <div class="chapter" id="TOC-6">
    <h2 class="chp"><a href="../Text/wizardandglass_con01.html#TOCC-6"><span class="chapnum"><b>CHAPTER I</b></span><br />
    B<span class="largecap">ENEATH THE</span> D<span class="largecap">EMON</span> M<span class="largecap">OON</span> (I)</a></h2>

    <h3 class="sub1"><b>1</b></h3>

I use <br /> all the time

BR
make sure only the 'chp' class is display: block;
all the rest must inherit

I would also use
line-height: 2em (in 'chp') to space the lines apart

DaleDe · 08-08-2014, 12:58 PM

br should certainly allow both lines to be centered. I use it for headings to allow the TOC to have the whole chapter title while having the title split on two lines.

Dale

cybmole · 08-08-2014, 02:26 PM

Quote:

Originally Posted by DaleDe

br should certainly allow both lines to be centered. I use it for headings to allow the TOC to have the whole chapter title while having the title split on two lines.

Dale

yes, I though that was how it should work, though I can't find an actual "rule" in print. So its a bug in the otherwise excellent moon + reader app. Just when I'd convinced myself that it was going to replace Kobo as my preferred android reader.

I looked for any discussion area on this site for that moon reader app but there is no obvious one

What you described is how it has been used in the example book I gave - the TOC for that book does have both header lines in its entries.
So long as I don't regenerate the toc though, my code edits which removed the <br> will be OK

shame, as I'd just convinced myself that that was the best epub reader for android

I'm now wondering how many of my books will be affected, and what the easiest way to tweak them will be. or if I can get used to ignoring it.

One other idea, which was hinted at in some page that google found me, is to "style" the br tag in CSS - can that be done ? maybe if that had an explicit "inherit" attribute then the reader might render it differently, and it would be much easier to add CSS to problem books than to have to run tricky regex.

cybmole · 08-08-2014, 05:25 PM

PS , probably not relevant but I observe that when an epub goes thru a calibre epub to epub conversion, any plain
<br/>
tag is changed, so it becomes
<br class="calibre5">
or some such-
with
.calibre5 {
display: block;
}
added to CSS
I assume that has no effect on how it renders though?

Hitch · 08-08-2014, 08:03 PM

Cyb:

What happens if you remove those spans that are creating the faux smallcaps or drop and incipits? Does it work then?

Hitch's brain is harkening back to a day when using multiple spans in a line, with the ADE engine, caused horrible line-breakage in Nook--I wonder if this could be related? Not directly, but...?

Hitch

cybmole · 08-09-2014, 03:03 AM

Quote:

Originally Posted by Hitch

Cyb:

What happens if you remove those spans that are creating the faux smallcaps or drop and incipits? Does it work then?

Hitch's brain is harkening back to a day when using multiple spans in a line, with the ADE engine, caused horrible line-breakage in Nook--I wonder if this could be related? Not directly, but...?

Hitch

probably not - I did hack out all the a href stuff and removing that made no difference. From other feedback it does seem that is moon reader app does mess up multi line headers, and more generally is seems to apply its own sizing rules to header tags, ignoring the font size set in the css.

so I'm probably going to not use it after all. I may make up a test file with various styles of h tag lines to test it in more detail, but its come up with too many fails already.

I had another bookread-in-porogress where the chapter number is styled into a black background box, so that number appears as white on black, in a little black square. In moon, instead of a 1 character sized black box, there is a black line all the way across the screen, and on some settings the chapter number therein was invisible. The CSS for that does not apply any colour to the chapter number, so I think is relied on some default interpretation that text written to a black background will be made visible , automatically ?

Code:

<h2 class="h"><span class="black"><span class="txbf">4</span></span></h2>

in that the style for txbf just said to use bold, the class black set a background colour

GMcG · 08-09-2014, 05:22 PM

Is there an end tag </div>? I don't see it.

George

cybmole · 08-10-2014, 02:32 AM

Quote:

Originally Posted by GMcG

Is there an end tag </div>? I don't see it.

George

I am sure the <div> tags match- eventually - I just copied & posted what i thought was the relevant chapter header code snippet,as we cant go around uploading entire books as attachments!

I checked for you - the closing ./div. for the chapter class is at the end of the chapter. i.e. the entire chapter is wrapped in that top level div

in fact the whole of each chapter is "double shrink wrapped" inside of a div within a body e.g.
<body class="text" id="text">
<div class="chapter" id="TOC-6">

Even more strangely, neither text or chapter are defined in the stylesheet - see below - It's a wonder the thing works at all!

Although it s an (oldish) retail book - the stylesheet suggests that it's a crude PDF conversion:

Code:

/* Textcafe version pdf2xml_2.0s54, */
/* A technology developed by Texterity, Inc - www.texterity.com */

b
{
  /* 320 uses */
  font-weight: bold;
}

div.pagebreak
{
  page-break-before: always;
}

p.dedication
{
  /* 1 uses */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-left: 1.0em;
  margin-right: 1.0em;
  margin-top: 2.0em;
  text-align: center;
}

i
{
  /* 1987 uses */
  font-style: italic;
}

p
{
  /* 0 uses */
}

p.copyright
{
  /* 0 uses */
  font-family: serif;
  font-size: x-small;
  font-weight: normal;
  font-style: normal;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  text-align: center;
}

p.also-by-author
{
  /* 1 uses */
  font-family: serif;
  font-size: x-small;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  text-align: center;
}

p.also-by-title
{
  /* 66 uses */
  font-family: serif;
  font-size: x-small;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  text-align: center;
}


p.image-center
{
  /* 28 uses */
  text-indent: 0em;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  text-align: center;
}

p.pause-space
{
  /* 33 uses */
  margin-top: 0em;
  margin-bottom: 0em;
}

p.tocchap
{
  /* 0 uses */
  font-family: serif;
  font-size: small;
  font-weight: normal;
  font-style: normal;
  text-indent: 0.0em;
  margin-left: 1.0em;
  margin-top: 0;
  margin-bottom: 0;
   
  text-decoration: none;
}

p.tocpart
{
  /* 0 uses */
  font-family: serif;
  font-size: small;
  font-weight: normal;
  font-style: normal;
  text-indent: 0.0em;
  margin-left: 0;
  margin-top: 1.0em;
  margin-bottom: 0;
   
  text-decoration: none;
}

p.tocsub1
{
  /* 0 uses */
  font-family: serif;
  font-size: small;
  font-weight: bold;
  font-style: normal;
  text-indent: 4.0em;
  margin-left: 0em;
  margin-top: 0;
  margin-bottom: 0;
   
  text-decoration: none;
}

p.tocsub2
{
  /* 0 uses */
  font-family: serif;
  font-size: small;
  font-weight: bold;
  font-style: normal;
  text-indent: 6.0em;
  margin-left: 0em;
  margin-top: 0;
  margin-bottom: 0;
   
  text-decoration: none;
}

span.smallcap
{
  /* 13 uses */
  font-size: xx-small;
}

span.largecap
{
  /* 81 uses */
  font-size: large;
}

span.sans
{
  /* 3 uses */
  font-family: sans-serif;
}

h2.chp
{
  /* 33 uses */
  /* inherits-from: h2.head-1; */
  font-family: serif;
  font-size: xx-large;
  font-weight: normal;
  font-style: normal;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 2.0em;
  margin-bottom: 2.0em;
  text-align: center;
  color: #221F1F;
}

span.chapnum
{
  /* 2 uses */
  font-size: medium;
}

h3.sub1
{
  /* 279 uses */
  /* inherits-from: h3.head-4; */
  font-family: serif;
  font-size: medium;
  font-weight: bold;
  font-style: normal;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 1.0em;
  text-align: center;
}

p.begin
{
  /* 2 uses */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 2.0em;
  }

p.para-flush
{
  /* 296 uses */
  /* inherits-from: p.text-1; */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;

}

p.para-indent
{
  /* 6316 uses */
  /* inherits-from: p.text-2; */
  font-family: serif;
  font-size: small;
  text-indent: 1.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
}

p.para-ragged-right
{
  /* 17 uses */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-right: 0.0em;
  }

p.para-ragged-indent
{
  /* 0 uses */
  font-family: serif;
  font-size: small;
  text-indent: 1.0em;
  margin-left: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-right: 0.0em;
  }

p.para-ragged-left
{
  /* 2 uses */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  text-align: right;
}

p.source
{
  /* 6 uses */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-left: 45%;
  margin-right: 0.0em;
    margin-top: 0.0em;
  margin-bottom: 0.0em;
}

p.para-center
{
  /* 2 uses */
  font-family: serif;
  font-size: small;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-right: 0.0em;
  text-align: center;
}

span.xx-largecap
{
  /* 1 uses */
  font-size: xx-large;
}

h1.part
{
  /* 5 uses */
  /* inherits-from: h1.head-7; */
  font-family: serif;
  font-size: xx-large;
  font-weight: bold;
  font-style: normal;
  text-indent: 0.0em;
  margin-left: 0.0em;
  margin-right: 0.0em;
  text-align: center;
  margin-top: 2.0em;
  page-break-before: always;
}

span.partnum
{
  font-size: medium;
}

GMcG · 08-10-2014, 05:52 AM

I think in h2.chp there is a conflict between
text-align: center
and
margin-left: 0em
margin-right: 0em

It's either ... or. And why do you need text-indent: 0.0em?

I would clean the stylesheet as well as the html file.
For example: You don't need the tag <b> in the html file. You could have it in
span.chapnum with font-weight: bold.
And those classes that are not defined in the stylesheet, could be removed in the html file.

George

cybmole · 08-10-2014, 06:41 AM

i appreciate that its a poorly coded book & that these lots I could do to improve it. but where this thread started was from observing that all but one reader app displayed 2 centred lines, and thus wanting to know why one did things differently.
that led to me wondering if there was an epub spec that defined what should happen, or if the app author could argue that the spec was ambiguous.

I posted the original book code here, but for my own reading copy I would run it through calibre & sigil and use remove unused styles to clean it up, as part of my standard workflow.

I cant explain why the original book CSS has the contradiction that you point out, but surely any decent app should make a decision & then render both header lines the same i.e. either center them both, or don't. centering one out of 2 is dust silly!

actually, I've often seem that combination of specifying margin(s) and specifying centered. I dont see a contradiction - margin tells me to not put text into certain screen areas, centred tells me to put the text in the middle of whatever space is allowed.

from reading other threads, it seems that others have experienced this bad rendering of multi-line chapter headers, so I don't thing the "bug" is specific to how theis one book is coded. I think it's due to how the developer of moon reader has chosen to selectively ignore some CSS. anyway the developer did eventually get back to me and asked for a copy of the book + a screen shot. I sent him the former & told him where to look!, as I did not want the hassle of having to take screenshots on tablet & them having to move them to the PC for attaching to an email reply. SO hopefully I'll get a response which I will pass on here.

I have a feeling that this app ( Moon + reader ) would mangle a simple verse of poetry that has been placed in a centered or indented div, with <br> to control the line breaks. I'm sure there are examples of that in my already-read fiction books but I can't immediately recall a title to go did out & I'm not quite motivated enough to build a test tile

I also suspect if of not honoring CSS margins for blockquote tags

Jellby · 08-10-2014, 08:38 AM

Quote:

Originally Posted by GMcG

I think in h2.chp there is a conflict between
text-align: center
and
margin-left: 0em
margin-right: 0em

There's no contradiction:

margins affect the position of the element in the parent box.
text-align affects the position of the text or child elements inside this element's box.

Maybe you are thinking of the common mistake:

Code:

<div><img style="text-align:center" src="..."/></div>

in this case it makes no sense to have text-align in the <img>, it should be in the <div> (or margins in the <img>).

theducks · 08-10-2014, 11:06 AM

Quote:

Originally Posted by GMcG

I think in h2.chp there is a conflict between
text-align: center
and
margin-left: 0em
margin-right: 0em

It's either ... or. And why do you need text-indent: 0.0em?

I would clean the stylesheet as well as the html file.
For example: You don't need the tag <b> in the html file. You could have it in
span.chapnum with font-weight: bold.
And those classes that are not defined in the stylesheet, could be removed in the html file.

George

No, you CAN center between any margins:
margin left: 20%; margin-right: 10%
now center in the off center column.

BTW why do some pubs indent a CENTERED chapter head?

(this will look like cr*p if you use a <br> or the line splits to fit)

I always force my way with a text-indent: 0;

Notjohn · 08-10-2014, 11:42 AM

>I always force my way with a text-indent: 0;

In the style sheet?

The various Kindles and apps never do this with an H2 chapter head, but only if it's presented as a normal paragraph (and your normal paragraphs are indented). I don't make a fetish of checking my books on Nook, but I've never seen it err in this way. Are there e-readers that will indent a heading unbid (unbade?)?

Thanks -

theducks · 08-10-2014, 12:23 PM

Yes, in the stylesheet

Sheesh, it is one line of CSS code to insure that it is YOUR way and not some manufacturers: 'we know best', way or some value inherited from a nest (I don't misuse use the oldtime H tag to get bigger-bolder trick)

08-08-2014, 11:18 AM	#1
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	correct interpretation of <br> with centred text i was reading a book in my latest tablet app- moon reader pro - & it seemed to be mangling some two-line headings- So I returned to sigil to check book view & code: in sigil book view, and in ADE, I see 2 lines of header, both centred, and the code has the two lines wrapped in spans, with a <br /> used to force a line break. it is yucky code as there's also some a href stuff linking back to toc but my issues is that moon reader displays it as line 1 centred line 2 left whereas every other epub reader I try displays both lines as centered so is there a relevant spec as to how it should render, or is there ambiguity and - the hard sigil question now... is there an alternative to <br> that can be simply regexed into place that will keep both lines centered. i kludged it with mutliple regex passes but ended up with wide spacing between the 2 header lines, as I forced them to be 2 x header lines of same class. I can see this being an issue with other books in this reader. e.g. there could be a verse of poetry- cenetred - with <br> used to force the line breaks, and that would be even more of a pain to tweak if it came out as only the 1st line centered, the rest not centered here's a snippet of the original crap (retail) code ( it's a Stephen King book ) Code: <body class="text" id="text"> <div class="chapter" id="TOC-6"> <h2 class="chp"><a href="../Text/wizardandglass_con01.html#TOCC-6"><span class="chapnum"><b>CHAPTER I</b></span><br /> B<span class="largecap">ENEATH THE</span> D<span class="largecap">EMON</span> M<span class="largecap">OON</span> (I)</a></h2> <h3 class="sub1"><b>1</b></h3> Last edited by cybmole; 08-08-2014 at 11:23 AM.

08-10-2014, 06:41 AM	#11
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	i appreciate that its a poorly coded book & that these lots I could do to improve it. but where this thread started was from observing that all but one reader app displayed 2 centred lines, and thus wanting to know why one did things differently. that led to me wondering if there was an epub spec that defined what should happen, or if the app author could argue that the spec was ambiguous. I posted the original book code here, but for my own reading copy I would run it through calibre & sigil and use remove unused styles to clean it up, as part of my standard workflow. I cant explain why the original book CSS has the contradiction that you point out, but surely any decent app should make a decision & then render both header lines the same i.e. either center them both, or don't. centering one out of 2 is dust silly! actually, I've often seem that combination of specifying margin(s) and specifying centered. I dont see a contradiction - margin tells me to not put text into certain screen areas, centred tells me to put the text in the middle of whatever space is allowed. from reading other threads, it seems that others have experienced this bad rendering of multi-line chapter headers, so I don't thing the "bug" is specific to how theis one book is coded. I think it's due to how the developer of moon reader has chosen to selectively ignore some CSS. anyway the developer did eventually get back to me and asked for a copy of the book + a screen shot. I sent him the former & told him where to look!, as I did not want the hassle of having to take screenshots on tablet & them having to move them to the PC for attaching to an email reply. SO hopefully I'll get a response which I will pass on here. I have a feeling that this app ( Moon + reader ) would mangle a simple verse of poetry that has been placed in a centered or indented div, with <br> to control the line breaks. I'm sure there are examples of that in my already-read fiction books but I can't immediately recall a title to go did out & I'm not quite motivated enough to build a test tile I also suspect if of not honoring CSS margins for blockquote tags Last edited by cybmole; 08-10-2014 at 06:43 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Replacing / with correct text	ghostyjack	Workshop	2	09-11-2013 11:35 AM
Exploration of the use of ebooks in literary interpretation	nekokami	News	11	10-02-2008 12:53 PM
last line in each paragraph centred	scgf	Calibre	9	09-10-2008 03:23 PM

08-08-2014, 12:58 PM	#3
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	br should certainly allow both lines to be centered. I use it for headings to allow the TOC to have the whole chapter title while having the title split on two lines. Dale

08-08-2014, 05:25 PM	#5
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	PS , probably not relevant but I observe that when an epub goes thru a calibre epub to epub conversion, any plain <br/> tag is changed, so it becomes <br class="calibre5"> or some such- with .calibre5 { display: block; } added to CSS I assume that has no effect on how it renders though?

08-08-2014, 08:03 PM	#6
Hitch Bookmaker & Cat Slave Posts: 11,503 Karma: 158448243 Join Date: Apr 2010 Location: Phoenix, AZ Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2	Cyb: What happens if you remove those spans that are creating the faux smallcaps or drop and incipits? Does it work then? Hitch's brain is harkening back to a day when using multiple spans in a line, with the ADE engine, caused horrible line-breakage in Nook--I wonder if this could be related? Not directly, but...? Hitch

08-09-2014, 05:22 PM	#8
GMcG Writer Posts: 101 Karma: 590630 Join Date: Mar 2011 Location: Munich, Germany Device: none	Is there an end tag </div>? I don't see it. George

08-10-2014, 05:52 AM	#10
GMcG Writer Posts: 101 Karma: 590630 Join Date: Mar 2011 Location: Munich, Germany Device: none	I think in h2.chp there is a conflict between text-align: center and margin-left: 0em margin-right: 0em It's either ... or. And why do you need text-indent: 0.0em? I would clean the stylesheet as well as the html file. For example: You don't need the tag <b> in the html file. You could have it in span.chapnum with font-weight: bold. And those classes that are not defined in the stylesheet, could be removed in the html file. George

08-10-2014, 11:42 AM	#14
Notjohn mostly an observer Posts: 1,518 Karma: 987654 Join Date: Dec 2012 Device: Kindle	>I always force my way with a text-indent: 0; In the style sheet? The various Kindles and apps never do this with an H2 chapter head, but only if it's presented as a normal paragraph (and your normal paragraphs are indented). I don't make a fetish of checking my books on Nook, but I've never seen it err in this way. Are there e-readers that will indent a heading unbid (unbade?)? Thanks -

08-10-2014, 12:23 PM	#15
theducks Well trained by Cats Posts: 30,671 Karma: 58985420 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Yes, in the stylesheet Sheesh, it is one line of CSS code to insure that it is YOUR way and not some manufacturers: 'we know best', way or some value inherited from a nest (I don't misuse use the oldtime H tag to get bigger-bolder trick)

Advert

Advert