06-05-2013, 09:13 PM | #1 |
Wizard
Posts: 1,076
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
<blockquote> help, please
I'm trying to style a <blockquote> in my style sheet, but it looks fine but fails FlightCrew with "no character data allowed by content model". I'd really prefer a "No Errors" check just to avoid missing something important
CSS is basic: Code:
html, body { height: 100%; margin: 0; padding:0; border-width: 0; font-family:"Charis SIL"; } @page { margin: 5pt; } h1 { page-break-before: always; page-break-after: avoid; text-indent: 0; text-align: center; margin-top:0; margin-bottom: 2em; font-size: 2em; font-weight: bold; font-style: normal; } p { text-indent:2em; text-align: left; font-size: 1em; margin-top:0; margin-bottom: 1em; font-size: 1em; font-weight: normal; font-style: normal; line-height:120%; } .noindent { text-indent: 0; } h1 + p { text-indent:0; } blockquote { text-indent: 0em; text-align: left; font-size: 1em; margin-left:10%; margin-right:10%; margin-top:1em; margin-bottom: 1em; font-size: 1em; font-weight: normal; font-style: italic; line-height:120%; } Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Styles/epub1.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Title Here</h1> <p>1 -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p> <blockquote> <p class="noindent">2 -- Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus.</p> </blockquote> <blockquote class="noindent"> <p>3 -- Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus.</p> </blockquote> <blockquote> 4 -- Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. </blockquote> <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"> <p>5 --- Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p> </blockquote> </body> </html> para 2 -<blockquote><p class="noindent"> is indented correctly, but loses the italic from the blockquote para 3 - <blockquote class="noindent"><p> no italic and wrong indent para 4 - <blockquote> has italic and correct alignment, but fails FlightCrew para 5 - <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p> is from the Sigil [Increase Indent] button So the question is ... .... how can I style the stylesheet to get the intended result (para 4), but not give me FlightCrew errors (apparently since there are no <p> tags)??? Thanks Paul BTW, I wish the [Increase Indent] would only wrap <blockquote> tags. I have to use a Clip to do that |
06-05-2013, 10:02 PM | #2 | |
Well trained by Cats
Posts: 29,817
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Why are you using a No Indent on the BQ. The No-indent should be on the P I think you are trying to do too much at the wrong box (layer) Style the text with its own class, control the overall margins in the BQ style Last edited by theducks; 06-05-2013 at 10:08 PM. Reason: Viewed file,add comments |
|
06-05-2013, 10:07 PM | #3 |
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
|
This is a difference between html and xhtml. Blockquote is a semantic element and is used to enclose something that was quoted. (It allows citing the source for example) It is not intended to be used to style as block elements are but html based browser code will interpret it as if it were html and style based on it. In html blockquote was often under a parent paragraph and inherited css accordingly from a p element, not the other way around. This difference in semantic vs. block elements is why it is behaving the way it is. You might find a ePub 3 compatible engine that would use it the way it was designed.
Dale |
06-05-2013, 10:43 PM | #4 |
A Hairy Wizard
Posts: 3,101
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
One technique i use is to define the properties of a generic blockquote container itself, then use a complex selector to style all paragraphs within a BQ a certain way:
blockquote {margin:2em} blockquote.write p {text-align:left; text-indent:1em; font-style:italic} blockquote.print p {text-align:justify; text-indent:0; font-family:unicode} <blockquote class="write"> <p>...</p> <p>...</p> <p>...</p> </blockquote> <blockquote class="print"> <p>...</p> <p>...</p> <p>...</p> </blockquote> Last edited by Turtle91; 06-05-2013 at 10:45 PM. |
06-06-2013, 02:44 AM | #5 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
The reason you loose the italic is because you set it in the blockquote, but override it in your paragraph style (font-style: normal). Since the <p> is inside the <blockquote> it overtakes the font-style.
|
06-06-2013, 04:46 AM | #6 |
Member
Posts: 15
Karma: 10
Join Date: Apr 2013
Location: Finland
Device: Bookeen Cybook Muse Frontlight
|
FlightCrew imposes XHTML 1.1 restrictions on HTML syntax; they are mostly the same as XHTML 1.0 Strict (just a little stricter). This includes the principle that the blockquote element must not directly contain text or text-level markup; everything inside it needs to be wrapped in block-level containers. A quick workaround is to use <blockquote><div>...</div></blockquote>.
|
06-06-2013, 06:29 AM | #7 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
|
06-06-2013, 08:54 AM | #8 |
Wizard
Posts: 1,551
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Hi phossler;
You can fix your problem by adding the following style in you css stylesheet: Code:
blockquote p { font-style: italic; text-indent: 0; } Code:
<blockquote> <p>...something...</p> </blockquote> Regards Rubén |
06-07-2013, 02:51 PM | #9 |
Wizard
Posts: 1,076
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
Thanks all --
I guess I misunderstood the CSS intended use of <blockquote>, thinking it was for formatting and not as a container. @RbnJrg -- I had never seen the Code:
blockquote p Code:
h1 + p Can you (or anyone) explain the difference or provide a link please? I use http://www.w3schools.com/css/default.asp and couldn't figure out what to search for Thanks Paul |
06-07-2013, 03:10 PM | #10 |
Well trained by Cats
Posts: 29,817
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
|
06-07-2013, 07:30 PM | #11 | |
Wizard
Posts: 1,551
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
I used a "descendant selector" With just typing in Google "css descendat selector" you'll find a lot of info about it. However you can read a clear (and synthetic) explanation here: http://css.maxdesign.com.au/selectut...descendant.htm With: Code:
blockquote + p {.... } Code:
blockquote p {.... } Now you know another css resource Regards Rubén |
|
06-07-2013, 07:40 PM | #12 |
Wizard
Posts: 1,076
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
|
06-08-2013, 03:57 AM | #13 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
06-08-2013, 07:48 AM | #14 |
Wizard
Posts: 1,551
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
06-08-2013, 09:43 AM | #15 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
Sometimes I wonder if I will ever understand this stuff!
(Evidently I was lucky when I changed my blockquote style to simply p. block { !) |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Does <blockquote> need <p> tags? | phossler | Sigil | 3 | 05-11-2013 04:40 PM |
Blockquote problem | kamanza | Conversion | 2 | 01-20-2013 12:19 PM |
blockquote grievance | Kamikuza | Amazon Kindle | 4 | 11-04-2012 07:03 PM |
blockquote over ride | dicknskip | Sigil | 3 | 03-21-2011 04:44 PM |
FBReader blockquote | minigrrl | PocketBook | 3 | 03-09-2010 08:09 PM |