View Full Version : What I actually want.


brewt
07-03-2010, 11:12 PM
Hey, I get asked. I know I can't have: Big Lottery Win, Trophy Wife, Trophy Mistress, Groovy Mansion, Hot Car, Good Wine, Good Cheer, Good Song, All Tax-Free.

That being said, I'll settle for a compromise. I want to compensate for Double Quotes in Body copy in an epub, universally. Like this:

...."I want this."
.....I want this.

Notice, the 'I' lines up vertically - well, close. And when this works, it does make a difference in the reading experience, believe it or not. That's what I want; to move the double quote into the margin. I can do this by subtracting out the space differences in the css, and re-style the quote-starting lines vs the non-quote-starting lines. Laborious, but it works.

Trouble is, I don't know what font the target system is going to use, and different fonts have an actual different horizontal space reserved for double quotes. To wit:
Font............................ Double Quote in ems
ACaslonPro-Regular.............. 0.360
AGaramondPro-Regular......... 0.415
AJensonPro-Regular............. 0.320
AmericanTypewriterStd-Med.. 0.520
ArnoPro-Regular.................. 0.350
Baskerville Old Face............ 0.810
BaskervilleCyrLTStd-Upright... 0.443
BauerBodoniStd-Roman......... 0.500
Bell MT.............................. 0.355
BemboStd.......................... 0.480
Berling Antiqua.................... 0.308
Bodoni MT.......................... 0.490
BodoniStd-Book................... 0.440
BulmerMTStd-Regular........... 0.440
Century Schoolbook............. 0.390
Constantia......................... 0.360
DejaVu Serif....................... 0.510
Dutch801 Rm BT Roman........ 0.460
EhrhardtMTStd-Regular......... 0.470
FairfieldLTStd-Medium.......... 0.390
Fontin-Regular.................... 0.400
Garamond3LTStd................. 0.390
GaramondPremrPro............... 0.370
Georgia.............................. 0.410
KeplerStd-Regular................0.350
Liberation Serif Regular......... 0.440
MinionPro-Regular................ 0.400
Palatino Linotype................. 0.500
PlantinStd.......................... 0.510
PoynterOSTextTwoL.............0.440
Times New Roman................ 0.443

So, I can build a whopping table that lists a large number of possibilities, if I only knew how to tell the css which font was going to happen.
And sure, I can cascade the css call, but I don't know how to get an if-then sort of statement to work with an epub to make the compensation dynamically.

Embedding could solve this, but the embedding solutions is also fraught with peril, as there are so many epub reading implementations that all seem to take a no-doubt-original-but-different approach, that embedding is a crap shoot at best (and to port to Kindle? Right out.). Because when the font calls don't work, the compensation is obviously wrong and looks worse than no double quote compensation at all.

But, I'm afraid it's just a dream, an impossible dream, fa la la la, la laa laaa la.

Unless the wise have a solution....

-bjc

Jellby
07-04-2010, 05:16 AM
I would have expected something like this to work:

<html>
<head>
<style>
div { margin-left: 3em; }
span.hang-left { width: 0; display: inline-block; text-align: right; }
</style>
</head>
<body>
<div>
<span class="hang-left">"</span>I want this."<br/>
I want this.
</div>
</body>
</html>

The problem is you lose kerning after the quote. And then inline-block is not included in the current ePUB standard, and Opera at least does not right-align anyway.

An uglier solution is:

<html>
<head>
<style>
div { margin-left: 3em; }
span.phantom { visibility: hidden; }
</style>
</head>
<body>
<div>
"I want this."<br/>
<span class="phantom">"</span>I want this.
</div>
</body>
</html>

because you have to repeat the quotes every line, and the visibility property is not in the current ePUB either.

Now, this works (in Opera), I'm not sure why:

<html>
<head>
<style>
div { margin-left: 3em; }
span.hang-left { position: relative; }
span.hang-left span { position: absolute; right: 0; }
</style>
</head>
<body>
<div>
<span class="hang-left"><span>"</span></span>I want this."<br/>
I want this.
</div>
</body>
</html>

awp
07-04-2010, 07:29 AM
Why not simply format your text with a monospaced font?

HarryT
07-04-2010, 08:31 AM
Why not simply format your text with a monospaced font?

Excuse me while I vomit ;).

brewt
07-04-2010, 10:16 AM
Well, this is how I am doing it:

<p class=BodyTextLeftQuote>"I want this."</p>
<p class=MsoBodyTextFirstIndent>I want this.</p>

css:
p.BodyTextLeftQuote
{mso-style-name:BodyTextLeftQuote;
margin-top:0in;
margin-right:0in;
margin-bottom:3.0pt;
margin-left:0in;
text-align:justify;
text-indent:15.8pt;
font-size:12.0pt;
font-family:"Dutch801 Rm BT","serif";}

p.MsoBodyTextFirstIndent
{mso-style-link:"Body Text First Indent Char";
margin-top:0in;
margin-right:0in;
margin-bottom:3.0pt;
margin-left:0in;
text-align:justify;
text-indent:20.9pt;
font-size:12.0pt;
font-family:"Dutch801 Rm BT","serif";}

It's these two lines that are giving me the concern:
text-indent:15.8pt;
text-indent:20.9pt;
Because if this isn't looked at with a Sony Reader, and the font used by the target device isn't Dutch Roman, those numbers are wrong. Hence, my dilemma and need for a dynamic fix, based on the font that is actually being used.

-bjc

p.s. Oh, and, you see why I use Word? I can use a macro to find the lines that start with double quotes and change the style to the double-quote style. Relatively painless.

pholy
07-04-2010, 11:16 AM
But... but... (sputter)... I just enlarged the font and now the reflow has moved the quoted sentence away from the beginning of the line... What now?

It seems to me that the hanging quote has to be a reader implemented feature, like ligatures, to actually work properly. Of course, if you want zero margins, you can't have hanging quotes!

Should we start a 'Good Typography Requires:' feature list? Would 'hanging quotes' be near the top? Is it an ordered list anyway? Should I start a new thread?

cmdahler
07-04-2010, 11:50 AM
There are so many things ePub needs in order to be acceptable as a typographic platform. Implementing a true optical margin option in which not just punctuation but also portions of letters such as the W or A are allowed to extend slightly beyond the margin to create the look of a balanced margin is just one of many. The only recourse at the moment is to hand-tune things like hanging punctuation, but that only works for one font size.

It's such a shame that the designers of the ePub standard seemed to have no interest in typography. Hopefully the standard will keep improving over the years until we get something that is actually typographically acceptable. Until then, I generally can't get more than a few pages into an ePub before being so distracted and irritated by the goofy typography that I can't really enjoy the book.

brewt
07-04-2010, 02:04 PM
I mis-typed above. I don't make the side-to-side space compensators in points, I do it in ems, so that when the point size is changed, the compensation adjusts appropriately to the new size.
Real typography can only be achieved with actual full control over the space presented. The current Epub spec is more of a quick and dirty approach. The one under proposal has indications of better control, without much detail (that I've found yet) on how to accomplish that.
On a real web page, scripting solves lots of these problems; I think there's concern about how carried away we could get if scripting took over in e-reading. Don't know why, bad scripting isn't that much worse than other kinds of bad data - bad characters, lack of reflow, etc.
Html5, anyone?
-bjc

troymc
07-04-2010, 02:25 PM
Should we start a 'Good Typography Requires:' feature list?

How about at least a list of recommended typography-related resources? I know I have 1000 questions about the "right" way to do things. And aren't there different schools of thought? (eg. MLA, APA, Chicago)

Sometimes when working with polytonic greek & old english I feel we've been cursed with this limited 102-key keyboard.

What do you guys think of The Elements of Typographic Style?


Troy

charleski
07-05-2010, 04:40 AM
There are so many things ePub needs in order to be acceptable as a typographic platform.
The problem here lies not so much with ePub as with CSS. CSS2 is antique, but neither CSS3 nor XSL:FO have the capability to accommodate complex layout-driven designs.

Relatively complex kerning modifications such as optical margin alignment either require specific support in the User Agent (Reading System) or would require ePub to use a presentation scheme fully capable of scripting. The latter is very unlikely, but with growing mobile processor power it's possible we may see more sophisticated UA-based rendering appear in the future.

Stitchawl
07-05-2010, 05:14 AM
I would have been satisfied with the trophy mistress.


Stitchawl

brewt
07-05-2010, 10:24 AM
Various web resources on typography:

http://en.wikipedia.org/wiki/Typography
http://ilovetypography.com/
http://books.sorodesign.com/
http://webtypography.net/
http://www.smashingmagazine.com/
http://typographica.org/
http://www.typophile.com/
http://typeforyou.blogspot.com/
http://fontleech.com/


Dead tree references:
The Complete Manual of Typography (http://www.amazon.com/Complete-Manual-Typography-James-Felici/dp/0321127307/ref=sr_1_17?ie=UTF8&s=books&qid=1278338929&sr=1-17)
The Elements of Typographic Style (http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792055/ref=sr_1_5?ie=UTF8&s=books&qid=1278339105&sr=1-5)
Thinking with Type (http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480/ref=sr_1_3?ie=UTF8&s=books&qid=1278338875&sr=1-3)
Book Typography (http://www.amazon.com/Book-Typography-Ari-Rafaeli/dp/1584561572)
Adobe Type Library Reference Book (http://www.amazon.com/exec/obidos/ASIN/0321544722/ref=ase_thedesignpublish)


And I hate to nag, but:
No wisdom on how to tell what font is being used on the target system, and no way to adjust the css based on that - true?

-bjc

p.s. Calling All Trophy Mistresses with Winning Lottery Tickets!

Jellby
07-05-2010, 10:32 AM
No wisdom on how to tell what font is being used on the target system, and no way to adjust the css based on that - true?

Not that I know of. And no way to "query" the font or glyph sizes (other than by using "em" units). Besides, the possibility of kerning pairs means that even if you know the exact size of a " glyph, you might end up with misaligned lines.

brewt
07-05-2010, 11:35 AM
I've had a degree of success knowing that size. As long as I'm rendering for devices I have on hand, it's close enough to be close enough. Examples at: http://home.comcast.net/~brewt.blacklist/site/

And I've tried cascading the font calls, which also has a degree of working, if I uninstall the first font, the second one seems to kick in (at least, in ade).

I'm finding that whatever sense I had when designing the set of numbers I'm using now is weird enough that I'm having trouble porting it to other font sets.

Hence, stress, consternation, frustration, desire for mansions.

-bjc

troymc
07-05-2010, 07:12 PM
Various web resources on typography:

http://en.wikipedia.org/wiki/Typography
http://ilovetypography.com/
http://books.sorodesign.com/
http://webtypography.net/
http://www.smashingmagazine.com/
http://typographica.org/
http://www.typophile.com/
http://typeforyou.blogspot.com/
http://fontleech.com/


Dead tree references:
The Complete Manual of Typography (http://www.amazon.com/Complete-Manual-Typography-James-Felici/dp/0321127307/ref=sr_1_17?ie=UTF8&s=books&qid=1278338929&sr=1-17)
The Elements of Typographic Style (http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792055/ref=sr_1_5?ie=UTF8&s=books&qid=1278339105&sr=1-5)
Thinking with Type (http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480/ref=sr_1_3?ie=UTF8&s=books&qid=1278338875&sr=1-3)
Book Typography (http://www.amazon.com/Book-Typography-Ari-Rafaeli/dp/1584561572)
Adobe Type Library Reference Book (http://www.amazon.com/exec/obidos/ASIN/0321544722/ref=ase_thedesignpublish)


And I hate to nag, but:
No wisdom on how to tell what font is being used on the target system, and no way to adjust the css based on that - true?

-bjc

p.s. Calling All Trophy Mistresses with Winning Lottery Tickets!

Thank you for this!


Troy