View Full Version : 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

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... :D

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? :smack:

Adjust
09-21-2010, 01:49 AM
Hahaha... Pholy, your post a quite a funny read...:D


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 :D).

shall1028
09-23-2010, 04:10 PM
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.

:rofl:

jharker
09-29-2010, 10:57 AM
Try this to get a space of whatever size you like:

<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
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
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. :(