Pre-formatted code snippet renders badly

CBSA · 01-19-2017, 07:42 AM

I have an epub that contains Python code snippets which are not rendered correctly (see attached screenshot).

Looking into the source code of the epub file, the code fragments are correctly wrapped with XHTML tags.

Quote:

I wonder if this is a problem with css, or something related!? Can anybody perhaps help me with this?

Brett Merkey · 01-19-2017, 07:55 AM

The problem is not the CSS. The example is rendering as coded. PRE tags are block elements. Anything tagged as such will render with whitespace and separate from other elements. Are the CODE classes styled as inline or block?

CBSA · 01-19-2017, 03:10 PM

Thank you very much for answering! How may I find out about this question? Shall I search for a CSS selector for classes "n", "p" and so on?

Brett Merkey · 01-19-2017, 05:12 PM

"Shall I search for a CSS selector for classes "n", "p" and so on?"
Yes. If one PRE tag surrounds all those instances of CODE tags, then the problem may be that the classes referred to in the CODE tags may be forcing the default inline CODE snippets to display as block elements—which is definitely not what you want. Perhaps look for "display: block" declarations and delete them.

CBSA · 01-20-2017, 08:46 AM

Well, I don't see any problems with the CSS code:

Quote:

/* ----------------- code ----------------- */

pre {
white-space: pre-wrap;

margin: 25px 0 25px 20px;
font-size: 85%;
display: block;
-webkit-hyphens: none;
hyphens: none;
adobe-hyphenate: none;
overflow-wrap: break-word;
}

div.note pre.programlisting, div.tip pre.programlisting,
div.warning pre.programlisting, div.caution pre.programlisting,
div.important pre.programlisting {
margin-bottom: 0px;
}

code {

-webkit-hyphens: none;
hyphens: none;
adobe-hyphenate: none;
overflow-wrap: break-word;
}

code strong em,
code em strong,
pre em strong,
pre strong em,
strong code em code,
em code strong code,
span.bolditalic code { /* yes, all of these variations are needed */
font-weight: bold;
font-style: italic;

}

code em,
em code,
pre em,
em.replaceable {

font-style: italic;
}

code strong, strong code, pre strong, strong.userinput {

font-weight: bold;
}

div[data-type="example"] {
margin: 10px 0 15px 0 !important;
}

div[data-type="example"] h1,
div[data-type="example"] h2,
div[data-type="example"] h3,
div[data-type="example"] h4,
div[data-type="example"] h5,
div[data-type="example"] h6 {
font-style: italic;
font-weight: normal;

text-align: left !important;
text-transform: none !important;
margin: 10px 0 5px 0 !important;
border-bottom: 1px solid #000;
}

li pre.example {
padding: 10px 0 !important;
}

div[data-type="example"] pre[data-type="programlisting"], div[data-type="example"] pre[data-type="screen"] { margin: 0; }

span.gray { /* Added for DOM Enlightenment 9781449342845 */

}

But I still believe that you spotted the source of the problem correctly.

CBSA · 01-20-2017, 09:21 AM

I coded now explicitly "display: block;" and "display: inline;" into the code CSS selector and could see that it makes a difference. I think the code elements are already inline elements.

My current line of thoughts is once again that it has to do with the setting "data-language-type: python" inside the pre element. For some reason, this style sheet is not applied. Could be related to the webkit references!?

JSWolf · 01-20-2017, 09:28 AM

Do not use a PRE tag. ADE has this wonderful bug where the text in the PRE tag does not wrap but goes off the screen.

Brett Merkey · 01-20-2017, 02:26 PM

<<I don't see any problems with the CSS code>>
Agree. The structural and style code display as expected in both my browser and Calibre. It is interesting that the one-letter classnames mentioned in the html are not specified in the css snippet.

CBSA · 01-20-2017, 02:50 PM

Hi Brett!

No, they are defined somewhere else in the CSS file. But they only code for different colors.

So far, I don't see how the lines of code and newlines are coded with help of the code tags. They enclose individual words and symbols, so even if they were shown all in a line, the newline characters would be missing.

Brett Merkey · 01-20-2017, 03:25 PM

Thanks for the clarification on those classes. I further experimented but found nothing. I was suspicious of the overflow-wrap property in the CODE rule. Sometimes if a CSS property which is meant for block elements is applied to an inline element, a user agent will "helpfully" convert the inline element to a block element. But taking the property out did nothing--and the W3C specs say the property should apply to all elements anyway.
A mystery...

Brett Merkey · 01-20-2017, 03:40 PM

@CBSA, for forensic purposes you could add a !important statement to the rule for CODE, like so:
code {display: inline !important;}
This is equivalent to using a shotgun to clear a clogged pipe (deer-in-headlight coding!) but it could indicate whether the problem has anything to do with the CODE tag at all.

JSWolf · 01-20-2017, 07:39 PM

Quote:

Originally Posted by CBSA

Hi Brett!

No, they are defined somewhere else in the CSS file. But they only code for different colors.

So far, I don't see how the lines of code and newlines are coded with help of the code tags. They enclose individual words and symbols, so even if they were shown all in a line, the newline characters would be missing.

If by code tags, you mean PRE, delete all PRE. ADE doesn't work well with PRE. This means if you use ADE or any program that uses ADE code, you could very well have text not properly displayed.

CBSA · 01-22-2017, 10:48 AM

Quote:

Originally Posted by JSWolf

If by code tags, you mean PRE, delete all PRE. ADE doesn't work well with PRE. This means if you use ADE or any program that uses ADE code, you could very well have text not properly displayed.

What do you mean by ADE?

JSWolf · 01-22-2017, 10:52 AM

Quote:

Originally Posted by CBSA

What do you mean by ADE?

ADE = Adobe Digital Editions

ADE is the #1 software world wide used to display ePub.

nahata5 · 02-04-2017, 01:43 PM

I had a similar problem and the best solution I could find was to change both the pre and code class white-space CSS element from "pre-wrap" to "normal". This at least gets them on the same line, but it is not a perfect fix. Maybe someone can uncover the final pieces to the puzzle.

01-19-2017, 07:55 AM	#2
Brett Merkey Not Quite Dead Posts: 194 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	The problem is not the CSS. The example is rendering as coded. PRE tags are block elements. Anything tagged as such will render with whitespace and separate from other elements. Are the CODE classes styled as inline or block? Last edited by Brett Merkey; 01-19-2017 at 07:58 AM.

01-20-2017, 09:21 AM	#6
CBSA Junior Member Posts: 6 Karma: 10 Join Date: Jan 2017 Device: iPad	Further tests I coded now explicitly "display: block;" and "display: inline;" into the code CSS selector and could see that it makes a difference. I think the code elements are already inline elements. My current line of thoughts is once again that it has to do with the setting "data-language-type: python" inside the pre element. For some reason, this style sheet is not applied. Could be related to the webkit references!?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
find badly formatted ebooks	alexxxm	Calibre	3	05-29-2016 12:33 PM
The Adventures of Joe Nobody and the Badly Formatted Epub	mklynds	Sigil	44	01-30-2013 02:43 PM
Badly formatted eBooks	Katsunami	General Discussions	27	02-03-2012 11:49 AM
Touch A badly formatted book or bad Kobo Touch rendering?	jswinden	Kobo Reader	16	07-07-2011 07:19 PM
Classic Bought a Badly Formatted Book From B&N	lionel47	Barnes & Noble NOOK	11	05-22-2010 04:31 PM

01-19-2017, 03:10 PM	#3
CBSA Junior Member Posts: 6 Karma: 10 Join Date: Jan 2017 Device: iPad	Thank you very much for answering! How may I find out about this question? Shall I search for a CSS selector for classes "n", "p" and so on?

01-19-2017, 05:12 PM	#4
Brett Merkey Not Quite Dead Posts: 194 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	"Shall I search for a CSS selector for classes "n", "p" and so on?" Yes. If one PRE tag surrounds all those instances of CODE tags, then the problem may be that the classes referred to in the CODE tags may be forcing the default inline CODE snippets to display as block elements—which is definitely not what you want. Perhaps look for "display: block" declarations and delete them.

01-20-2017, 09:28 AM	#7
JSWolf Resident Curmudgeon Posts: 74,370 Karma: 129333690 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Do not use a PRE tag. ADE has this wonderful bug where the text in the PRE tag does not wrap but goes off the screen.

01-20-2017, 02:26 PM	#8
Brett Merkey Not Quite Dead Posts: 194 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	<<I don't see any problems with the CSS code>> Agree. The structural and style code display as expected in both my browser and Calibre. It is interesting that the one-letter classnames mentioned in the html are not specified in the css snippet.

01-20-2017, 02:50 PM	#9
CBSA Junior Member Posts: 6 Karma: 10 Join Date: Jan 2017 Device: iPad	Hi Brett! No, they are defined somewhere else in the CSS file. But they only code for different colors. So far, I don't see how the lines of code and newlines are coded with help of the code tags. They enclose individual words and symbols, so even if they were shown all in a line, the newline characters would be missing.

01-20-2017, 03:25 PM	#10
Brett Merkey Not Quite Dead Posts: 194 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	Thanks for the clarification on those classes. I further experimented but found nothing. I was suspicious of the overflow-wrap property in the CODE rule. Sometimes if a CSS property which is meant for block elements is applied to an inline element, a user agent will "helpfully" convert the inline element to a block element. But taking the property out did nothing--and the W3C specs say the property should apply to all elements anyway. A mystery...

01-20-2017, 03:40 PM	#11
Brett Merkey Not Quite Dead Posts: 194 Karma: 654170 Join Date: Jul 2015 Device: Paperwhite 4; Galaxy Tab	@CBSA, for forensic purposes you could add a !important statement to the rule for CODE, like so: code {display: inline !important;} This is equivalent to using a shotgun to clear a clogged pipe (deer-in-headlight coding!) but it could indicate whether the problem has anything to do with the CODE tag at all.

02-04-2017, 01:43 PM	#15
nahata5 Junior Member Posts: 1 Karma: 10 Join Date: Feb 2017 Device: Kindle	I had a similar problem and the best solution I could find was to change both the pre and code class white-space CSS element from "pre-wrap" to "normal". This at least gets them on the same line, but it is not a perfect fix. Maybe someone can uncover the final pieces to the puzzle.

Advert

Advert