Remove first line indent fails with a Section Layout Prefix in EPub3 compile

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 1:37 pm Post

This is quite straightforward, when you have a section layout prefix, a <p> is generated to wrap the prefix content. This means that the following <p> which is the "first" paragraph now does not match the p + p CSS rule you use to collapse the text indent. Here is an Inspector view in iBooks showing the issue:

Screen Shot 2017-12-12 at 21.24.02.png
Screen Shot 2017-12-12 at 21.24.02.png (99.92 KiB) Viewed 789 times


The solution is theoretically simple, use a <div> instead of a <p>. I think if you put it in manually then MMD should respect the raw HTML when it converts to EPub...

User avatar
KB
Site Admin
Posts: 19307
Joined: Tue Jun 13, 2006 11:23 pm
Platform: Mac
Location: Truro, Cornwall
Contact:

Tue Dec 12, 2017 1:56 pm Post

Hmm, I'm not sure about that. In your particular case a <div> would be fine, because you are using the prefix to insert an image. But if it is a paragraph, then it is better to use <p>...
"You can't waltz in here, use my toaster, and start spouting universal truths without qualification."

User avatar
AmberV
Posts: 20800
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Santiago de Compostela, Galiza
Contact:

Tue Dec 12, 2017 2:07 pm Post

For this case, wouldn’t the following selector suffice?

Code: Select all

p.centered-text + p { text-indent: 0rem; }
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 2:12 pm Post

OK, so the solution would be to use another CSS rule that excluded a particular class sibling selector. If you can give the <p> in the prefix an #id then you can use this in the default CSS (it is more specific and thus overrides the p + p rule):

Code: Select all

p#sectionprefix + p { text-indent: 0rem; }


I tested it in the inspector and it works:
Screen Shot 2017-12-12 at 22.07.01_SML.png
Screen Shot 2017-12-12 at 22.07.01_SML.png (49.45 KiB) Viewed 780 times

Note the <p> wrapping the prefix is given an id="sectionprefix" and this allows the CSS rule to match and the indent is correctly collapsed...

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 2:14 pm Post

AmberV: if centered-text is exclusively used there then that would also work, but the #id is going to be more precise...

EDIT: the other issue though is if you can have multiple paragraphs, in which case I wonder whether you should do:

<div id="sectionprefix"><p>blah</p></div>

?

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 2:35 pm Post

OK, just tested and yes if you enter multiple lines, the prefix content generates multiple <p>'s:

Code: Select all

<p class="centered-text"><img src="images/flourish.png" alt="" id="flourish.png" style="height:21px;width:125px;" /></p>
<p style="text-align: justify">Blah</p>
<p style="text-align: justify">Doh!</p>
<p>THIS DUMMY SCRIVENER project is intended to illustrate how to: Use folders in the Binder to hold the Title and heading quotation of each chapter. The quotation will <strong>not</strong> have its first words in upper case. Each folder has a Section Type of <em>Chapter Title</em> and will be given a Section Layout of <em>Chapter with Title</em> in compile.</p>


So wrappinng all the <p>'s in an #id'ed <div> (make sure this div has no margins or padding) would be an easy way to solve this...

User avatar
AmberV
Posts: 20800
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Santiago de Compostela, Galiza
Contact:

Tue Dec 12, 2017 2:49 pm Post

My line of thinking then would be that it should be using a “heading-flourish” class instead of something generic. It might very well be you’d want that for other reasons as well, to modify the spacing of the box a bit to design the element into the heading and away from the body text for example.

IDs are probably a better tool in this particular role, I do agree, and if desired they could be achieved through other means: like using a markup pass-through style instead of a simple classed paragraph, and supply whatever HTML you well please….

Although, ha, I just realised something funny happens when you try that. The <$img…> tag goes from generating HTML to inserting a placeholder Unicode glyph for the image. I’m not sure what function that would be used for; might not be intentional.

Well—that aside, you could use this:

Code: Select all

<p id="section-flourish"><img src="images/flourish.png" /></p>


…so long as somewhere else “flourish.png” is compiled normally.

There is an interesting side-effect to using that method: Scrivener has no clue what you are doing in a pass-through style nor does it care. So from what I can tell of how the code handles lines that have been injected this way, they are classified as “blank lines”, in terms of the behaviour chosen in the Text Layout compile format pane. Consequence: my code snippet looks like this on output, without any custom CSS:

Code: Select all

<div class="titled-section">
<h1 style="text-align: center; text-indent: 0em">SCENE A</h1>
<p id="section-flourish"><img src="images/flourish.png" /></p>
<p style="text-indent: 0em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>


That inline style override is directly influenced by the From paragraphs after blank lines checkbox.

Update: still though with the div vs p discussion, isn’t all of this better handled under a broad umbrella of “switch on raw HTML and have at it”, than specific feature adjustments? We’ll never anticipate everything one wants to do in the prefix field, so why not leave it open-ended?

Unless I’m missing something, I think the following is a very simple example of where a hard-coded approach like you’re describing could be problematic: you’re looking at this as a way of inserting an image beneath major section break’s heading—but there is nothing about the section prefix field that implies it only be used once per .xhtml file. There might be a whole sequence of items within a literal eBook section that are using a layout with a prefix, and now the hard-coded ID assumption breaks the more strict validity checks.
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles

User avatar
KB
Site Admin
Posts: 19307
Joined: Tue Jun 13, 2006 11:23 pm
Platform: Mac
Location: Truro, Cornwall
Contact:

Tue Dec 12, 2017 3:17 pm Post

I can actually make it so that <div> is used instead of <p> around any paragraph that contains nothing but an image. Is this safe to do or could it have other ramifications?
"You can't waltz in here, use my toaster, and start spouting universal truths without qualification."

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 3:33 pm Post

This isn't anything to do about the <img>, only that the prefix can generate paragraphs, and any paragraph will stop your p + p rule from working as intended:
Screen Shot 2017-12-12 at 23.21.46.png
Screen Shot 2017-12-12 at 23.21.46.png (5.86 KiB) Viewed 759 times

The compiler suggests that the first indent will be removed, which it does normally because of the p + p and other CSS rules. But those CSS rules break if the prefix has any content, because it becomes the first paragraph not the content.

This is an edge case for sure, but just to be clear, the problem is with any prefix content that comes after the title. My solution would be a semantic one — a <div> identifies all content of the prefix, whether it is text or an image. I can't see this as being a problem, unless there is another CSS rule that is a child not a descendant selector where this would be an issue...

User avatar
KB
Site Admin
Posts: 19307
Joined: Tue Jun 13, 2006 11:23 pm
Platform: Mac
Location: Truro, Cornwall
Contact:

Tue Dec 12, 2017 3:41 pm Post

In your particular case it is an image that is the prefix, though.

It is to be expected that if you use text in a prefix, then that will become the first text and should rightly be a paragraph and so will be affected by p+p. That's not a bug - that's expected behaviour.

However, I am suggesting that when a paragraph contains nothing but an image, it could be surrounded by <div> instead of <p> - would that cause any problems?

As for it being a problem, by the time the MMD and HTML is generated the text has been compiled, so Scrivener has no way of knowing at that point a prefix from anything else.
"You can't waltz in here, use my toaster, and start spouting universal truths without qualification."

User avatar
AmberV
Posts: 20800
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Santiago de Compostela, Galiza
Contact:

Tue Dec 12, 2017 4:02 pm Post

KB wrote:However, I am suggesting that when a paragraph contains nothing but an image, it could be surrounded by <div> instead of <p> - would that cause any problems?

I’d say in terms of best-practices, a div should ideally only be used as a container for multiple related items rather than as a structural appendage for one single item. If one element needs special treatment, that is what classes and ids are for, if a suitable specific element is not already available.

nontroppo wrote:This is an edge case for sure, but just to be clear, the problem is with any prefix content that comes after the title. My solution would be a semantic one — a <div> identifies all content of the prefix, whether it is text or an image. I can’t see this as being a problem, unless there is another CSS rule that is a child not a descendant selector where this would be an issue…

I would be inclined more toward this, that if a prefix or suffix is comprised of multiple block elements then it could be wrapped in a div. It would give one additional formatting power in terms of handling the prefix as a whole, without resorting to pass-through styles.

But, importantly, that would reduce flexibility, right? At the moment I can do this, in combination with the above inclusion of an image:

Image

And get the following HTML:

Code: Select all

<h1 style="text-align: center; text-indent: 0em">SCENE A</h1>
<p class="centered-text" style="text-indent: 0em"><img src="images/flourish.png" alt="" id="flourish.png" style="height:25px;width:93px;" /></p>
<p style="text-indent: 0em"><span class="scene-time">12:32 — </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>


I wouldn’t be able to get that result if the code through a div around the section-prefix because it had multiple block elements.

It’s an assumption that if a prefix/suffix has multiple block level elements we will want to semantically group them together with a div element—and that might be a safe assumption in many cases, but it might step on some toes in others in a way that cannot be worked around. (Whereas one can always insert divs into their prefix through the use of pass-through styles).
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 4:14 pm Post

Hm, this is thorny edge case indeed. AmberV is correct in that for potential inline content you don't want an intervening block element. In which case the <div> is only appropriate if the content has a newline after it. This also applies to an <img> as the <img> can be inline or block depending on its placement. So if an image is alone and terminated with a newline, then <div>, otherwise a <p> or a <span> depending on line termination?

User avatar
KB
Site Admin
Posts: 19307
Joined: Tue Jun 13, 2006 11:23 pm
Platform: Mac
Location: Truro, Cornwall
Contact:

Tue Dec 12, 2017 4:28 pm Post

nontroppo wrote:Hm, this is thorny edge case indeed. AmberV is correct in that for potential inline content you don't want an intervening block element. In which case the <div> is only appropriate if the content has a newline after it. This also applies to an <img> as the <img> can be inline or block depending on its placement. So if an image is alone and terminated with a newline, then <div>, otherwise a <p> or a <span> depending on line termination?


So back to my earlier suggestion, you mean? An image on its own gets <div> around it instead of <p>?
"You can't waltz in here, use my toaster, and start spouting universal truths without qualification."

User avatar
nontroppo
Posts: 873
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Dec 12, 2017 4:40 pm Post

If it is a lone image with a newline, then IMO yes.

User avatar
AmberV
Posts: 20800
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Santiago de Compostela, Galiza
Contact:

Wed Dec 13, 2017 10:38 am Post

But not if it is an epigraph with an attribution line (two paragraphs)?
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles