epub code snippets (html / css) - Page 13

Hendrixxxxxxxx · 11-17-2015, 05:44 AM

Quote:

Originally Posted by Jellby

Thanks Zelda, that's indeed a nice trick. I'm now playing with it, and here's the same thing "cleaned-up" and with the elements made visible:

(Edited for space)

I think the css is self-explanatory, this keeps the settings specific to an image separated from the global ones. The max-widths are actually optional, but the widths (and height) are proportional to them (I guess that makes it impossible to use percent values, as then width and height proportions are not linked). I don't know if it would be possible to do something more self-contained, that allows an easier change of the image size...

Hi all,
I realise this thread is rather old, but I am just wondering if someone can tell me if I'm doing something wrong.

I read the various posts in this thread about this image (Alice talking to the Cheshire Cat) and wanted to replicate it myself, so followed the instructions to the letter (actually, copied and pasted both the css code into the style sheet, and the html code into the body, adjusting for the size of the image - mine is a gif, 342x480).
In fact, I tried all 3 versions detailed in this thread, and got the same (or at least they looked similar) results every time.....and that is, it looks perfect in Sigil (screenshot attached), but doesn't work in any of the e-book previewers I have (iBooks, ADE, and Kindle Previewer) or my Kindle Paperwhite - see attached screenshots. .

I am sure it is something I am not understanding and am doing wrong, but I have spent quite a few hours on it now, adjusting various things, and have not been able to get a different result.

I could paste the code in here, but it is simply a copy and paste of code earlier in this thread, and it seems to work OK in Sigil.

Does anyone have any idea where I should be looking please?

Doitsu · 11-17-2015, 07:29 AM

Quote:

Originally Posted by Hendrixxxxxxxx

Does anyone have any idea where I should be looking please?

I encountered exactly the same problems.

Check out this solution by RbnJrg.

It works with ADE, iBooks and AZW3 books. The only downside is that the image won't resize if the user changes the font size.

Hendrixxxxxxxx · 11-17-2015, 08:04 AM

Thanks Doitsu. I'll have a look.

roger64 · 05-31-2016, 09:52 AM

Hi
Putting the Calibre editor "report" to good use, I obtained a list of Roman digits (see screenshot). I wish to enclose them in a span only if they are followed by the expression

Code:

<sup>e</sup>*

My aim is to obtain for them this code for example:

Code:

<span class="century">XII</span><sup>e</sup>*

Code:

.century {
 font-size: smaller;
 text-transform: uppercase;
}

* is (&)#160;
Doing this way, I do not modify other names like: Chapter XII, Charles IV which are NOT centuries.

To check them one by one for each number would be very long for a full book. Is there a code I could use to get this result? Up to now none of them has a span. All the centuries have this e

Doitsu · 05-31-2016, 10:54 AM

You could use a simple regex search & replace operation. The following should work both in Sigil and Calibre Editor:

Find:([MDCLXVI]+)e
Replace:\1e

roger64 · 05-31-2016, 12:38 PM

Thank you. Solved (27 items modified).

I suppressed the M in the search field because we have also some Me which means "maître" (say a lawyer).

roger64 · 06-15-2016, 11:41 AM

Hi

It happens we may have to intersperse within the text a lot of no-break spaces or narrow-no-break spaces (if they did not do it before with the text processor). In French, we have to do it according to specific typographic "rules" (before some punctuation signs, among them

Code:

? ! : ;

It's tricky to do it because many tags, including in the head, contain such signs and if you add some no-break space there, you trigger parsing mistakes.

So, the question is: how can I insert these signs only within the text and avoid spoiling any tag?

For example:

- Nothing here:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">

- Only for the red print here:

Code:

<p class="standard">« Cette lettre en est la preuve ! C’est à cause de cette Sylvia Sheilds. Elle lui a tourné la tête. Il est tout bizarre depuis qu’elle a quitté l’île. » Mon père avait donc lu la lettre ! Mon estomac se contracta.</p>

pdurrant · 06-16-2016, 03:13 AM

Quote:

Originally Posted by roger64

It's tricky to do it because many tags, including in the head, contain such signs and if you add some no-break space there, you trigger parsing mistakes.

So, the question is: how can I insert these signs only within the text and avoid spoiling any tag?

Perhaps the calibre editor or Sigil provide some 'text only' checkbox in their search/replace?

To do the job properly requires an XML parser linked to the search/replace, so no ordinary text editor is going to be adequate.

jbacelar · 06-16-2016, 04:32 AM

With Calibre editor:
For example for the character ?.
Remove all non-break spaces or narrow-no-break spaces before ?.
Run this search with regex-function:

Search:

Code:

>[^\n<]*?<

Function:

Code:

def replace (match, number, file_name, metadata, dictionaries, data, functions, * args, ** kwargs):
     return match.group().replace ("?","@?")

Where @ would be a no-break space or narrow-no-break space.

roger64 · 06-16-2016, 10:10 AM

@jbacelar

Thanks very much.

This code is working very well for one punctuation sign. I tried to make it work for a second one but I probably did something wrong because it failed. I have been told indentation is tricky but between theory and practice...

So, I tried this... No

Code:

def replace (match, number, file_name, metadata, dictionaries, data, functions, * args, ** kwargs):
     return match.group().replace ("!","@!")

def replace (match, number, file_name, metadata, dictionaries, data, functions, * args, ** kwargs):
     return match.group().replace ("?","@?")

Should I create several functions like your own or is there a way to concatenate several of them in a single one (or even better group several punctuation signs replacement in the same command)?

jbacelar · 06-16-2016, 11:35 AM

@roger64

Oh! forgiveness for being so succinct.

The correct code is:

Code:

def replace(match, number, file_name, metadata, dictionaries, data, functions, *args, **kwargs):
    return match.group().replace("?","@?").replace("!","@!").replace(";","@;").replace(":","@:")

Of course, you also have to remove the n-b-spaces, before the other characters.

roger64 · 06-16-2016, 01:06 PM

It's working.

The only thing is the count with the Calibre editor: it anounces 1386 replacement which seems to be only the replacements regarding the first element. When I make a separate recount (out of the function), it finds 1802 which seems to be the true amount, because, as far as I can look, every punctuation signs get its own @.

The main thing is that the full function does the job. I will reuse it for many other things.

Thanks a lot for your very appreciated help.

jbacelar · 06-16-2016, 01:13 PM

You are welcome

roger64 · 10-08-2016, 08:24 PM

Hi

I have a regex question. The solution would allow me to convert more easily output from my word processor.

Say we have this text:

Code:

<blockquote>
      <p>A la première ville,<br/>Son amant l’habille<br/>Tout en satin blanc</p>
      <p>A la seconde ville,<br/>Son amant l’habille<br/>En or, en argent.</p>
      <p>Elle était si belle<br/>Qu’on lui tendait les voiles<br/>Dans tout le régiment.</p>
</blockquote>

I wish, using an editor, to add a class "note" for each p. The number of p can vary from one to nine.

I fail to do it.

theducks · 10-09-2016, 12:07 AM

Quote:

Originally Posted by roger64

Hi

I have a regex question. The solution would allow me to convert more easily output from my word processor.

Say we have this text:

Code:

<blockquote>
      <p>A la première ville,<br/>Son amant l’habille<br/>Tout en satin blanc</p>
      <p>A la seconde ville,<br/>Son amant l’habille<br/>En or, en argent.</p>
      <p>Elle était si belle<br/>Qu’on lui tendait les voiles<br/>Dans tout le régiment.</p>
</blockquote>

I wish, using an editor, to add a class "note" for each p. The number of p can vary from one to nine.

I fail to do it.

Just do a SINGLE mode search and replace, with the cursor on the <blockquote>




If you are changing a font, why not apply the class to the Blockquote instead

05-31-2016, 09:52 AM	#184
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Formatting centuries (French) Hi Putting the Calibre editor "report" to good use, I obtained a list of Roman digits (see screenshot). I wish to enclose them in a span only if they are followed by the expression Code: <sup>e</sup>* My aim is to obtain for them this code for example: Code: <span class="century">XII</span><sup>e</sup>* Code: .century { font-size: smaller; text-transform: uppercase; } * is (&)#160; Doing this way, I do not modify other names like: Chapter XII, Charles IV which are NOT centuries. To check them one by one for each number would be very long for a full book. Is there a code I could use to get this result? Up to now none of them has a span. All the centuries have this <sup>e</sup> Attached Thumbnails Last edited by roger64; 05-31-2016 at 10:02 AM.

05-31-2016, 10:54 AM	#185
Doitsu Grand Sorcerer Posts: 5,582 Karma: 22735033 Join Date: Dec 2010 Device: Kindle PW2	You could use a simple regex search & replace operation. The following should work both in Sigil and Calibre Editor: Find:([MDCLXVI]+)<sup>e</sup> Replace:<span class="century">\1</span><sup>e</sup>

05-31-2016, 12:38 PM	#186
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Thank you. Solved (27 items modified). I suppressed the M in the search field because we have also some M<sup>e</sup> which means "maître" (say a lawyer).

06-15-2016, 11:41 AM	#187
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Only the text please Hi It happens we may have to intersperse within the text a lot of no-break spaces or narrow-no-break spaces (if they did not do it before with the text processor). In French, we have to do it according to specific typographic "rules" (before some punctuation signs, among them Code: ? ! : ; It's tricky to do it because many tags, including in the head, contain such signs and if you add some no-break space there, you trigger parsing mistakes. So, the question is: how can I insert these signs only within the text and avoid spoiling any tag? For example: - Nothing here: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR"> - Only for the red print here: Code: <p class="standard">« Cette lettre en est la preuve ! C’est à cause de cette Sylvia Sheilds. Elle lui a tourné la tête. Il est tout bizarre depuis qu’elle a quitté l’île. » Mon père avait donc lu la lettre ! Mon estomac se contracta.</p> Last edited by roger64; 06-15-2016 at 12:32 PM.

06-16-2016, 04:32 AM	#189
jbacelar Interested in the matter Posts: 421 Karma: 426094 Join Date: Dec 2011 Location: Spain, south coast Device: Pocketbook InkPad 3	With Calibre editor: For example for the character ?. Remove all non-break spaces or narrow-no-break spaces before ?. Run this search with regex-function: Search: Code: >[^\n<]?< Function: Code: def replace (match, number, file_name, metadata, dictionaries, data, functions, args, ** kwargs): return match.group().replace ("?","@?") Where @ would be a no-break space or narrow-no-break space.

11-17-2015, 08:04 AM	#183
Hendrixxxxxxxx Connoisseur Posts: 67 Karma: 136594 Join Date: Jan 2013 Location: Hong Kong Device: Kindle DX, Paperwhite, Paperwhite II, and Voyage	Thanks Doitsu. I'll have a look.

06-16-2016, 10:10 AM	#190
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	@jbacelar Thanks very much. This code is working very well for one punctuation sign. I tried to make it work for a second one but I probably did something wrong because it failed. I have been told indentation is tricky but between theory and practice... So, I tried this... No Code: def replace (match, number, file_name, metadata, dictionaries, data, functions, * args, ** kwargs): return match.group().replace ("!","@!") def replace (match, number, file_name, metadata, dictionaries, data, functions, * args, ** kwargs): return match.group().replace ("?","@?") Should I create several functions like your own or is there a way to concatenate several of them in a single one (or even better group several punctuation signs replacement in the same command)?

06-16-2016, 11:35 AM	#191
jbacelar Interested in the matter Posts: 421 Karma: 426094 Join Date: Dec 2011 Location: Spain, south coast Device: Pocketbook InkPad 3	@roger64 Oh! forgiveness for being so succinct. The correct code is: Code: def replace(match, number, file_name, metadata, dictionaries, data, functions, args, kwargs): return match.group().replace("?","@?").replace("!","@!").replace(";","@;").replace(":","@:") Of course, you also have to remove the n-b-spaces, before the other characters. Last edited by jbacelar; 06-16-2016 at 11:43 AM.*

06-16-2016, 01:06 PM	#192
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	It's working. The only thing is the count with the Calibre editor: it anounces 1386 replacement which seems to be only the replacements regarding the first element. When I make a separate recount (out of the function), it finds 1802 which seems to be the true amount, because, as far as I can look, every punctuation signs get its own @. The main thing is that the full function does the job. I will reuse it for many other things. Thanks a lot for your very appreciated help.

06-16-2016, 01:13 PM	#193
jbacelar Interested in the matter Posts: 421 Karma: 426094 Join Date: Dec 2011 Location: Spain, south coast Device: Pocketbook InkPad 3	You are welcome

10-08-2016, 08:24 PM	#194
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Hi I have a regex question. The solution would allow me to convert more easily output from my word processor. Say we have this text: Code: <blockquote> <p>A la première ville,<br/>Son amant l’habille<br/>Tout en satin blanc</p> <p>A la seconde ville,<br/>Son amant l’habille<br/>En or, en argent.</p> <p>Elle était si belle<br/>Qu’on lui tendait les voiles<br/>Dans tout le régiment.</p> </blockquote> I wish, using an editor, to add a class "note" for each p. The number of p can vary from one to nine. I fail to do it. Last edited by roger64; 10-08-2016 at 08:28 PM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
direkter Umlaut oder lieber HTML Code in Epub ?	NASCARaddicted	Erste Hilfe	14	06-16-2011 05:54 AM
Programming language code snippets in ebooks?	Connochaetes	Writers' Corner	7	10-18-2010 02:43 PM
ebook-convert HTML to EPUB and problem with <pre><code>	mikegr	Calibre	2	03-09-2010 02:27 PM
css override code for margins?	Amalthia	Calibre	15	08-11-2009 07:20 PM
Problems generating ePub from HTML/CSS	AlexBell	Calibre	3	07-17-2009 05:10 AM

Advert

Advert