Span tags, h1s and emspaces

ConorHughes · 09-20-2010, 09:04 AM

Hello all, nice to be here. I've referred to this site many times whilst working on an epub project for the organization I work for, it's been a great resource. I have a question I have yet to have been able to find an answer.

I am formatting a chinese language version of an epub that is meant to go to the various epub formats including the ibook. If anyone has any experience with Chinese they may know that the words "Introduction" and "Preface" need 2 emspaces between them. However when I try and put an emspace in the xhtml between the 2 characters the Ipad completely ignores it. Secondly, if I try to apply padding via a span tag to one of the characters that gets ignored as well. I find this strange as I do this with bullet characters and it works. However for whatever reason, the neither the span tag nor the emspace seem to work.

I have also tried entering an emdash character and making it white, also to no avail.

Does anyone have any other suggestions? Thank you!

An example of the code/syntax is below

Code:

emspace:

<p class="title-01" id="toc-anchor"><前<em><em>言</span></p> 

span tag:

<p class="title-01" id="toc-anchor"><span class="emspace">前</span>言</p>

span.emspace{
padding-right:2em;
}

pholy · 09-20-2010, 11:59 AM

Welcome in from the lurk, CH.

Surely you aren't using <em> to represent an em space, are you? That's the html tag for emphasis...

Try & #8195; (without the space between the & and #, of course) (the Unicode value) or & emsp; (without the space) (the named entity)

I don't mean to be snarky; I've had my share of silly errors while learning book conversion... Hmmm, that didn't help, did it?

Adjust · 09-21-2010, 01:49 AM

Hahaha... Pholy, your post a quite a funny read...

I remember when I started my at a local typesetters taking in corrections to manuscripts. I kept coming across a / symbol with the word "solidus" written in the margin.
So I proceeded to replace the word to the left of the / with the word solidus.

Needless to say my proof checker went absolutely mental at me, while screaming solidus IS a / you moron!!!

ConorHughes · 09-23-2010, 11:39 AM

Hi guys sorry about the long delay. Thanks for the reply!

I saw a coworker of mine use <em> and they seemed to think it would create an emspace so I followed suit haha!

Anyways, neither solution seemed to work in my case. the problem could lie in the fact that I needed these emspaces in a chinese font, and the unicode value nor the html value seemed to produce the proper result.

In light of this however the solution seemed to be to enter the emdashes and apply a white character style to them. Dreamweaver and epubs accepted the white character style there, whereas when I applied it manually to the xhtml/css it didnt work on the ipad.

in case anyone wonders, something similar has to be done with hindi numbers.

All the best,
Conor

Jellby · 09-23-2010, 01:18 PM

You could modify the Chinese font to include the em-space, look for fontforge.

Or you could create a 1-pixel transparent PNG, and wrap it in something like:

<img class="emspace" src="emspace.png" />

img.emspace { width: 1em; display: inline;}

P.S. Actually, it does not have to be 1-pixel, it can be any size, but 1-pixel is smallest. I've attached one. (EDIT: which I see now it's almost impossible to download

).

shall1028 · 09-23-2010, 04:10 PM

Quote:

Originally Posted by Jellby

Or you could create a 1-pixel transparent PNG, and wrap it in something like...

Hoody hoo! This made my day. We've progressed so far in producing HTML based content that we're back to 1996 using a 1 pixel image hack to make sure that spacing comes out right. Only differences: PNG instead of GIF and CSS styling.

jharker · 09-29-2010, 10:57 AM

Try this to get a space of whatever size you like:

Code:

<span style="display: inline-block; width: 10px;"> </span>

This is tested and works on iBooks. At least, it works for me!

Jellby · 09-29-2010, 01:32 PM

But "inline-block" is in the ePUB specification, i.e., it is not required to be supported by ePUB readers. It may work in iBooks, but it's bound to fail in other software (and you can't blame it).

charleski · 09-30-2010, 05:28 AM

The method you tried using padding in a span is the proper way to do it and works just fine in ADE. iBooks, unfortunately, is an abysmally poor reader, and is as standards-compliant as IE6 was.

jharker · 09-30-2010, 11:13 AM

Quote:

Originally Posted by charleski

The method you tried using padding in a span is the proper way to do it and works just fine in ADE. iBooks, unfortunately, is an abysmally poor reader, and is as standards-compliant as IE6 was.

I completely agree about iBooks being horribly inconsistent and not standards-compliant at all.

Unfortunately, I'm working on an exclusively iBooks project right now, and hence tend to think in terms of getting around its bugs -- I mean, "features".

charleski · 09-30-2010, 03:30 PM

Quote:

Originally Posted by jharker

Unfortunately, I'm working on an exclusively iBooks project right now, and hence tend to think in terms of getting around its bugs -- I mean, "features".

For your own sake, just be sure that you document any hacks as clearly as possible so that they can be ripped out and cleaned up in the future. IE6 and earlier produced a huge mess in web applications that people are still struggling to fix, I wouldn't like to see that happen to epubs as well.

jharker · 09-30-2010, 05:00 PM

Thanks! Yes, most of what I'm doing is trying to replace one standards-compliant method that doesn't work on iBooks, with another standards-compliant method which DOES. But occasionally there's simply no way to do what I want without an ugly hack.

09-20-2010, 09:04 AM	#1
ConorHughes Junior Member Posts: 9 Karma: 10 Join Date: Sep 2010 Device: All of the above	Span tags, h1s and emspaces Hello all, nice to be here. I've referred to this site many times whilst working on an epub project for the organization I work for, it's been a great resource. I have a question I have yet to have been able to find an answer. I am formatting a chinese language version of an epub that is meant to go to the various epub formats including the ibook. If anyone has any experience with Chinese they may know that the words "Introduction" and "Preface" need 2 emspaces between them. However when I try and put an emspace in the xhtml between the 2 characters the Ipad completely ignores it. Secondly, if I try to apply padding via a span tag to one of the characters that gets ignored as well. I find this strange as I do this with bullet characters and it works. However for whatever reason, the neither the span tag nor the emspace seem to work. I have also tried entering an emdash character and making it white, also to no avail. Does anyone have any other suggestions? Thank you! An example of the code/syntax is below Code: emspace: <p class="title-01" id="toc-anchor"><前<em><em>言</span></p> span tag: <p class="title-01" id="toc-anchor"><span class="emspace">前</span>言</p> span.emspace{ padding-right:2em; }

09-23-2010, 01:18 PM	#5
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You could modify the Chinese font to include the em-space, look for fontforge. Or you could create a 1-pixel transparent PNG, and wrap it in something like: <img class="emspace" src="emspace.png" /> img.emspace { width: 1em; display: inline;} P.S. Actually, it does not have to be 1-pixel, it can be any size, but 1-pixel is smallest. I've attached one. (EDIT: which I see now it's almost impossible to download ). Attached Images

09-29-2010, 10:57 AM	#7
jharker Developer Posts: 345 Karma: 3473 Join Date: Apr 2007 Location: Brooklyn, NY, USA Device: iRex iLiad v1, Blackberry Tour, Kindle DX, iPad.	Try this to get a space of whatever size you like: Code: <span style="display: inline-block; width: 10px;"> </span> This is tested and works on iBooks. At least, it works for me!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
STREET & CLAIRVOYANCE by Ryan A. Span	Winter	Self-Promotions by Authors and Publishers	36	09-01-2010 11:09 AM
Tags gone again	ccowie	Calibre	5	07-26-2010 01:53 PM
element "span" not allowed in this context	jihwan	Calibre	4	07-17-2010 09:25 PM
attribute "span" not	paulpeer	Sigil	14	03-10-2010 05:24 PM
PRS-500 Span tags in LRS and LRF files -- do I understand them?	Falstaff	Sony Reader Dev Corner	2	01-31-2007 10:34 AM

09-20-2010, 11:59 AM	#2
pholy Booklegger Posts: 1,801 Karma: 7999816 Join Date: Jun 2009 Location: Toronto, Ontario, Canada Device: BeBook(1 & 2010), PEZ, PRS-505, Kobo BT, PRS-T1, Playbook, Kobo Touch	Welcome in from the lurk, CH. Surely you aren't using <em> to represent an em space, are you? That's the html tag for emphasis... Try & #8195; (without the space between the & and #, of course) (the Unicode value) or & emsp; (without the space) (the named entity) I don't mean to be snarky; I've had my share of silly errors while learning book conversion... Hmmm, that didn't help, did it?

09-21-2010, 01:49 AM	#3
Adjust Addict Posts: 351 Karma: 70000 Join Date: Jul 2010 Location: Australia Device: ADE, iPad	Hahaha... Pholy, your post a quite a funny read... I remember when I started my at a local typesetters taking in corrections to manuscripts. I kept coming across a / symbol with the word "solidus" written in the margin. So I proceeded to replace the word to the left of the / with the word solidus. Needless to say my proof checker went absolutely mental at me, while screaming solidus IS a / you moron!!!

09-23-2010, 11:39 AM	#4
ConorHughes Junior Member Posts: 9 Karma: 10 Join Date: Sep 2010 Device: All of the above	Hi guys sorry about the long delay. Thanks for the reply! I saw a coworker of mine use <em> and they seemed to think it would create an emspace so I followed suit haha! Anyways, neither solution seemed to work in my case. the problem could lie in the fact that I needed these emspaces in a chinese font, and the unicode value nor the html value seemed to produce the proper result. In light of this however the solution seemed to be to enter the emdashes and apply a white character style to them. Dreamweaver and epubs accepted the white character style there, whereas when I applied it manually to the xhtml/css it didnt work on the ipad. in case anyone wonders, something similar has to be done with hindi numbers. All the best, Conor

09-29-2010, 01:32 PM	#8
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	But "inline-block" is in the ePUB specification, i.e., it is not required to be supported by ePUB readers. It may work in iBooks, but it's bound to fail in other software (and you can't blame it).

09-30-2010, 05:28 AM	#9
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	The method you tried using padding in a span is the proper way to do it and works just fine in ADE. iBooks, unfortunately, is an abysmally poor reader, and is as standards-compliant as IE6 was.

09-30-2010, 05:00 PM	#12
jharker Developer Posts: 345 Karma: 3473 Join Date: Apr 2007 Location: Brooklyn, NY, USA Device: iRex iLiad v1, Blackberry Tour, Kindle DX, iPad.	Thanks! Yes, most of what I'm doing is trying to replace one standards-compliant method that doesn't work on iBooks, with another standards-compliant method which DOES. But occasionally there's simply no way to do what I want without an ugly hack.

Advert

Advert