KF8 and raised cap

mandy314 · 04-08-2014, 02:32 PM

I would like to have a "raised cap" for the chapter starting paragraphs of my KF8-book.

Code:

.parafirst {font-size: 100%;line-height: 120% ..}
.parafirst:first-letter {font-size: 300% ...}

is one version I tested. I tried span, various line-height settings etc but Kindle Paperwhite is stubborn: the height of the first line is always computed from the first letter font-size. So the first line has a greater height than the other lines of the paragraph.
I know about the 1.2em / 120% line-height minimum of KF8, but perhaps someone has some css to get nice looking raised caps.

Thanks in advance.

RbnJrg · 04-08-2014, 04:32 PM

Quote:

Originally Posted by mandy314

I would like to have a "raised cap" for the chapter starting paragraphs of my KF8-book.

Code:

.parafirst {font-size: 100%;line-height: 120% ..}
.parafirst:first-letter {font-size: 300% ...}

is one version I tested. I tried span, various line-height settings etc but Kindle Paperwhite is stubborn: the height of the first line is always computed from the first letter font-size. So the first line has a greater height than the other lines of the paragraph.
I know about the 1.2em / 120% line-height minimum of KF8, but perhaps someone has some css to get nice looking raised caps.

Thanks in advance.

Did you try something like this:

https://www.mobileread.com/forums/sho...8&postcount=20

GrannyGrump · 04-09-2014, 05:23 AM

I don't have a Kindle, so if my mutterings are useless, just ignore them.

Just to clarify, you are asking about a Raised / Up cap, not a drop-cap, right?

Drop-caps can be tweaked with both *height* and *line-height*, but it seems like Raised caps only respond to line-height. If this book is only for your own use, you might consider setting the line-height to 120% globally, in body{} or in your p{} paragraph styling. (I know, not an elegant solution.)

The attached screen-shot compares display with default line-height, vs. line-height set to 120 in my paragraph style.

p {
margin: .25em 0;
text-indent: 1.5em;
line-height: 120%;
}

Maybe one of the gurus will be inspired to find a solution...

mandy314 · 04-09-2014, 07:06 AM

thank you for your replies

@RbnJrg
Nice drop caps - but I wouldn't know how to align the float with the text baseline (and keep the Kindle option for resizing the font) to get a raised cap. Always fascinating to see what css is supported (and what not).

@GrannyGrump
Yeah - your css works (with CalibreReader/Editor). The 120% line-height should be inherited in computed absolute terms by the inline raised cap. But the Kindle KF8 reader seems to check every block/inline element for a minimum of 120% height and to compute the line-height always based on the largest font used in the line. With a raised cap of 150% this isn't a big issue, if you go over 200% it's rather ugly though. With your example (given the size of the caps W) on the Kindle PW you would get a height of approx 150% for the first line in the 120% paragraph.

":first-line with line-height" - don't work, "inline-block" - don't work, "line-height: inherit" - don't work ... I've run out of options

RbnJrg · 04-09-2014, 08:38 PM

Quote:

Originally Posted by mandy314

thank you for your replies

@RbnJrg
Nice drop caps - but I wouldn't know how to align the float with the text baseline (and keep the Kindle option for resizing the font) to get a raised cap. Always fascinating to see what css is supported (and what not).

Try this:

1. In your css stylesheet write:

Code:

@font-face {
   font-family: "Marnie";
   font-weight: normal;
   font-style: normal;
   src: url("../Fonts/Marnie.ttf");
}

h1 {
   font-size: 1.4em;
   text-align: center;
   margin-bottom: 2em;
}

p {
   font-size: 1em;
   text-align: justify;
   text-indent: 0;
}

p + p {
   text-indent: 1.2em;
}

.raised_cap {
   float: left;
   font-family: "Marnie";
   font-size: 4em;
   margin-top: -0.75em;  /* play with this value */
   margin-bottom: -0.6em; /* play with this value */
   height: 1em;
}

2. Write the following in your .xhtml file:

Code:

<body>
  <h1>This is the title</h1>

  <p><span class="raised_cap">L</span>orem 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>

In Sigil and ADE doesn't look fine but in Kindle Previewer (AND YOU ARE SEEKING SOMETHING FOR KF8

) looks very nice (not only for KPW but also for KFHD); watch for yourself:

Click image for larger version

Name: Image1.png
Views: 378
Size: 115.2 KB
ID: 121486

Of course, you'll have to write some code to manage the old Kindle devices since the code I wrote only works for devices who support the .kf8 format. Below you can see the respective epub.

Regards
Rubén

HarryT · 04-10-2014, 04:12 AM

Surely a raised cap is as simple as doing something like:

Code:

<big>T</big>he cat sat on the mat.

isn't it?

mandy314 · 04-10-2014, 06:21 AM

@RbnJrg
Thank you for this working solution.
Only one downside (beside the hassle to get the margin-corrections right for the embedded font): if the user selects a different font on the Kindle PW (I tested this on my rig) the cap's position is wrong as the margin offsets seem to be dependant on the font metrics.

@HarryT
Could it be that simple? No - I did some testing. Even with <big> you get additional leading in the line. <big> isn't that big on the PW, so not much leading is added and you could say "it doesn't matter".

I really don't do fancy formatting. But to see a simple things like raised caps (with css) not working as expected is a KF8-"pita"!

RbnJrg · 04-10-2014, 08:44 AM

Quote:

Originally Posted by mandy314

@RbnJrg
Thank you for this working solution.
Only one downside (beside the hassle to get the margin-corrections right for the embedded font): if the user selects a different font on the Kindle PW (I tested this on my rig) the cap's position is wrong as the margin offsets seem to be dependant on the font metrics.

Well, don't use a custom font

and play with the margin-top, margin-bottom values so the raised cap is in a proper position.

RbnJrg · 04-10-2014, 12:31 PM

Maybe you could use svg images as raised caps. You'll need to create svg images for each raised caps but are very simple to write them. For example:

1. In the .css stylesheet goes:

Code:

h1 {
   font-size: 1.4em;
   text-align: center;
   margin-bottom: 2em;
}

p {
   font-size: 1em;
   text-align: justify;
   text-indent: 0;
   margin: 0;
}

p + p {
   text-indent: 1.2em;
}

2. In the Images folder of Sigil you need to have something like:

Code:

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="70" height="90">
    <defs>
       <style type="text/css">
         <![CDATA[
           @font-face {
              font-family: "Marnie";
              src: url("../Fonts/Marnie.ttf");
           }
         ]]>
       </style>
    </defs>
    <text x="0" y="90" style="font-size: 90px" font-family="Marnie">
       L
    </text>
</svg>

I saved the image above as "L.svg". All yours svg images will be the same except that you'll have to change the letter "L" for the letter you want.

3. In your .xhtml file you should have something like:

Code:

  <h1>This is the title</h1>

  <p><img alt="L" src="../Images/L.svg" />orem 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>

This works for .kf8 and also for ADE

Click image for larger version

Name: Image1.png
Views: 376
Size: 107.4 KB
ID: 121508

Click image for larger version

Name: Image2.png
Views: 412
Size: 85.5 KB
ID: 121509

However you can get a raised cap in ADE without need a svg image

Finally, a drawback

I used as font-size in the svg images "pixel" as unit. That avoids that the raised cap changes its size when you change the device font-size. To achieve that, we would need to set the font-size in the svg images in "em" unit. In theory, svg supports "em" but I never could get that svg accepts "em"

So, that is all we have.

Below you can check the respective epub.

Regards
Rubén

EDIT: I forgot to tell you that in Sigil you won't see the custom font in the svg images; that is a bug of Sigil (and some web browser like Firefox). However it will be displayed properly in Kindle.

EDIT II: By remembering a trick that I use with my svg fleurons, I could get that the "svg image raised-cap" changes its size when you change the device font-size. To do this, add the following class to your stylesheet:

Code:

.raised_cap {
   display: inline;
   width: auto;
   height: 4em;
}

and in the .xhtml file use:

Code:

  <h1>This is the title</h1>

  <p><img class="raised_cap" alt="L" src="../Images/L.svg" />orem 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>

Now you have what you want

I made the respective changes in the epub attached to this post.

Hitch · 04-19-2014, 09:14 PM

Gang:

Setting a line-height at 120% or 1.2ems is not worth doing, as that's the default setting for all Kindles, anyway. You can't change it to 100% or 1.0em.

ALSO, on real devices, most Raised Initials will cause the line-spacing of which we're speaking; while you can sometimes get it to look "right" on Previewer, it still shows the extra leading between the first and second lines on devices. On Paperwhite, which is even more "font-sensitive" than almost all the others, this is pretty much a lost cause, as something like 98% of the readers never know to turn on "Publisher Font," (which they MUST do to get the embedded font, mind you), ANYWAY.

The user doesn't have to 'select a different font;" in order to see all the work you've done, they have to actively go to "Fonts-->Publisher Font" in order to see what you did in the FIRST place. Unlike other Kindles, they don't default-display the embedded font--you have to turn it ON.

So, while I'm all for embellishing books as the next guy, remember that the vast majority of PPW readers will never see an embedded font, much less the Initial Cap, DropCap, or anything else that you've labored to put in there. Trust me: I spent a lot of time coming to grips with that little bit of reality, myself.

FWIW.

@HarryT:

For all intents and purposes, YES. You may as well.

@Ruben:

What's your media-query/fallback styling for the K7's, for that svg?

Hitch

mandy314 · 04-20-2014, 07:17 AM

thank you all for your replies

in the end I'm with Hitch: it seems to be a lost cause for KF8 really (and not only for embedded fonts)
IIRC Amazon KF8 guidelines say the 1.2em/120% minimum line-height is set to get good pagination. I can see sense in this one - but perhaps it would have been more elegant to set the minimum for block but not for inline elements.
AFAIK CSS-standard would be inline elements inheriting line-height in absolute computed terms when for the parent the line-height is set in % or em. This doesn't work with KF8 for Kindle own fonts or for embedded fonts. So - one can say - KF8 isn't css-compliant.
As I'm new to ebook-formatting I hoped for some css that work with KF8 when I asked the question. The float- and the svg-things are clever but I don't think it is worth the effort to "out-fox" a restriction apllied by Amazon with intention.

Thank you again!

RbnJrg · 04-20-2014, 10:10 AM

Quote:

Originally Posted by Hitch

@Ruben:

What's your media-query/fallback styling for the K7's, for that svg?

Hitch

Hi Hitch;

I really didn't think in a fallback for K7

since the OP wanted something for KF8. But now you mention it, I guess that the usual formula should work; something like:

Code:

@media amzn-kf8 {
.raised_cap1 {
   display: inline;
   width: auto;
   height: 4em;
}

.raised_cap2 {
   display: none;
}
}

@media amzn-mobi {
.raised_cap1 {
   display: none;
}

.raised_cap2 {
   font-weight: bold;
}
}

And in .xhtml file:

Code:

<h1>This is the title</h1>

  <p><img class="raised_cap1" alt="L" src="../Images/L.svg" /><span class="raised_cap2">L</span>orem 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>

I didn't try the above solution but I think it should work

Regards
Rubén

EDIT: maybe we could find another solution by using a .gif image instead of a .svg one. In that case could be possible to have raised cap also in K7 (like the Amazon's ads).

RbnJrg · 04-20-2014, 10:37 AM

Quote:

Originally Posted by mandy314

thank you all for your replies

in the end I'm with Hitch: it seems to be a lost cause for KF8 really (and not only for embedded fonts)
IIRC Amazon KF8 guidelines say the 1.2em/120% minimum line-height is set to get good pagination. I can see sense in this one - but perhaps it would have been more elegant to set the minimum for block but not for inline elements.

By using .svg images as I told you in my previous post, you can get the following:

1. To show a raised a cap.
2. The raised cap can be of any custom font you like.
3. There is no need to the user to enable "publisher fonts" to see the raised cap.
4. The raised cap can change its size when the user change the device font size.
5. There is no problem with the Amazon's line-height limitation.
6. The raised cap looks great in Kindle devices that support .kf8; you can judge by yourself:

Click image for larger version

Name: screen_shot-31459.gif
Views: 713
Size: 35.2 KB
ID: 121901

What you see above is a screenshot of my Kindle.

Conclusion: is posible to have raised cap for the .kf8 format. Of course, that will take a bit of time (more than if you could work only with css), but YOU CAN DO IT

Regards
Rubén

Hitch · 04-21-2014, 02:48 PM

Quote:

Originally Posted by RbnJrg

By using .svg images as I told you in my previous post, you can get the following:

1. To show a raised a cap.
2. The raised cap can be of any custom font you like.
3. There is no need to the user to enable "publisher fonts" to see the raised cap.
4. The raised cap can change its size when the user change the device font size.
5. There is no problem with the Amazon's line-height limitation.
6. The raised cap looks great in Kindle devices that support .kf8; you can judge by yourself:

Attachment 121901

What you see above is a screenshot of my Kindle.

Conclusion: is posible to have raised cap for the .kf8 format. Of course, that will take a bit of time (more than if you could work only with css), but YOU CAN DO IT

Regards
Rubén

Rubén:

Her difficulty lies with the fact that she would have picked an image--a Cap--based on her desired, embedded font, generally speaking. A Raised Initial that goes with, say...Open Sans, just for giggles, won't look very spiffy with Times New Roman, or, say, Trebuchet. So, she has two challenges, given her view on the Paperwhite--how to get people to make the extra effort to see the font she wants them to see, and ensuring that her Raised Initial "matches" whatever font they select. It wouldn't be that simple to find an elegant Raised Initial to match all possible Paperwhite fonts.

This is why--as elegant and lovely as your solution is--using an actual letter works better, in the sense that you don't have to worry that your imaged Raised Initial matches ALL the possible fonts. THAT is the "issue."

See what I mean? Your solution really is quite nice, don't misunderstand me. It's just a bit of a challenge when she has no control over the PPW. On the other devices, she can reasonably expect the user to see her embedded fonts. Not so on the Paperwhite. It's a challenge that affects us all. Her real answer is simply to live with the leading, like everyone else does.

Hitch

RbnJrg · 04-21-2014, 06:33 PM

Quote:

Originally Posted by Hitch

Rubén:

Her difficulty lies with the fact that she would have picked an image--a Cap--based on her desired, embedded font, generally speaking. A Raised Initial that goes with, say...Open Sans, just for giggles, won't look very spiffy with Times New Roman, or, say, Trebuchet. So, she has two challenges, given her view on the Paperwhite--how to get people to make the extra effort to see the font she wants them to see, and ensuring that her Raised Initial "matches" whatever font they select. It wouldn't be that simple to find an elegant Raised Initial to match all possible Paperwhite fonts.

This is why--as elegant and lovely as your solution is--using an actual letter works better, in the sense that you don't have to worry that your imaged Raised Initial matches ALL the possible fonts. THAT is the "issue."

See what I mean?

OK; now I understand your point (good point

)

Regards
Rubén

04-08-2014, 02:32 PM	#1
mandy314 Connoisseur Posts: 71 Karma: 200092 Join Date: Mar 2014 Device: kindle pw1	KF8 and raised cap I would like to have a "raised cap" for the chapter starting paragraphs of my KF8-book. Code: .parafirst {font-size: 100%;line-height: 120% ..} .parafirst:first-letter {font-size: 300% ...} is one version I tested. I tried span, various line-height settings etc but Kindle Paperwhite is stubborn: the height of the first line is always computed from the first letter font-size. So the first line has a greater height than the other lines of the paragraph. I know about the 1.2em / 120% line-height minimum of KF8, but perhaps someone has some css to get nice looking raised caps. Thanks in advance.

04-09-2014, 05:23 AM	#3
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	I don't have a Kindle, so if my mutterings are useless, just ignore them. Just to clarify, you are asking about a Raised / Up cap, not a drop-cap, right? Drop-caps can be tweaked with both height and line-height, but it seems like Raised caps only respond to line-height. If this book is only for your own use, you might consider setting the line-height to 120% globally, in body{} or in your p{} paragraph styling. (I know, not an elegant solution.) The attached screen-shot compares display with default line-height, vs. line-height set to 120 in my paragraph style. p { margin: .25em 0; text-indent: 1.5em; line-height: 120%; } Maybe one of the gurus will be inspired to find a solution... Attached Thumbnails

04-10-2014, 04:12 AM	#6
HarryT eBook Enthusiast Posts: 85,544 Karma: 93383043 Join Date: Nov 2006 Location: UK Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6	Surely a raised cap is as simple as doing something like: Code: <big>T</big>he cat sat on the mat. isn't it?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Other Fiction Southworth, E.D.E.N.: Self-Raised. v1. 14 Jan 2013e	crutledge	Kindle Books	0	01-14-2014 06:39 AM
Other Fiction Southworth, E.D.E.N.: Self-Raised. v1. 14 Jan 2013e	crutledge	BBeB/LRF Books	0	01-14-2014 06:35 AM
Touch Raised button on Glowlight is a problem	cguerette	Barnes & Noble NOOK	0	01-11-2014 09:05 PM
Content KF8 only or combined KF8/Mobi	JSWolf	Amazon Kindle	9	06-03-2012 09:11 PM
PRS-900 Sony ebook prices raised	sirmaru	Sony Reader	1	05-26-2010 12:37 PM

04-09-2014, 07:06 AM	#4
mandy314 Connoisseur Posts: 71 Karma: 200092 Join Date: Mar 2014 Device: kindle pw1	thank you for your replies @RbnJrg Nice drop caps - but I wouldn't know how to align the float with the text baseline (and keep the Kindle option for resizing the font) to get a raised cap. Always fascinating to see what css is supported (and what not). @GrannyGrump Yeah - your css works (with CalibreReader/Editor). The 120% line-height should be inherited in computed absolute terms by the inline raised cap. But the Kindle KF8 reader seems to check every block/inline element for a minimum of 120% height and to compute the line-height always based on the largest font used in the line. With a raised cap of 150% this isn't a big issue, if you go over 200% it's rather ugly though. With your example (given the size of the caps W) on the Kindle PW you would get a height of approx 150% for the first line in the 120% paragraph. ":first-line with line-height" - don't work, "inline-block" - don't work, "line-height: inherit" - don't work ... I've run out of options

04-10-2014, 06:21 AM	#7
mandy314 Connoisseur Posts: 71 Karma: 200092 Join Date: Mar 2014 Device: kindle pw1	@RbnJrg Thank you for this working solution. Only one downside (beside the hassle to get the margin-corrections right for the embedded font): if the user selects a different font on the Kindle PW (I tested this on my rig) the cap's position is wrong as the margin offsets seem to be dependant on the font metrics. @HarryT Could it be that simple? No - I did some testing. Even with <big> you get additional leading in the line. <big> isn't that big on the PW, so not much leading is added and you could say "it doesn't matter". I really don't do fancy formatting. But to see a simple things like raised caps (with css) not working as expected is a KF8-"pita"!

04-19-2014, 09:14 PM	#10
Hitch Bookmaker & Cat Slave Posts: 11,462 Karma: 158448243 Join Date: Apr 2010 Location: Phoenix, AZ Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2	Gang: Setting a line-height at 120% or 1.2ems is not worth doing, as that's the default setting for all Kindles, anyway. You can't change it to 100% or 1.0em. ALSO, on real devices, most Raised Initials will cause the line-spacing of which we're speaking; while you can sometimes get it to look "right" on Previewer, it still shows the extra leading between the first and second lines on devices. On Paperwhite, which is even more "font-sensitive" than almost all the others, this is pretty much a lost cause, as something like 98% of the readers never know to turn on "Publisher Font," (which they MUST do to get the embedded font, mind you), ANYWAY. The user doesn't have to 'select a different font;" in order to see all the work you've done, they have to actively go to "Fonts-->Publisher Font" in order to see what you did in the FIRST place. Unlike other Kindles, they don't default-display the embedded font--you have to turn it ON. So, while I'm all for embellishing books as the next guy, remember that the vast majority of PPW readers will never see an embedded font, much less the Initial Cap, DropCap, or anything else that you've labored to put in there. Trust me: I spent a lot of time coming to grips with that little bit of reality, myself. FWIW. @HarryT: For all intents and purposes, YES. You may as well. @Ruben: What's your media-query/fallback styling for the K7's, for that svg? Hitch

04-20-2014, 07:17 AM	#11
mandy314 Connoisseur Posts: 71 Karma: 200092 Join Date: Mar 2014 Device: kindle pw1	thank you all for your replies in the end I'm with Hitch: it seems to be a lost cause for KF8 really (and not only for embedded fonts) IIRC Amazon KF8 guidelines say the 1.2em/120% minimum line-height is set to get good pagination. I can see sense in this one - but perhaps it would have been more elegant to set the minimum for block but not for inline elements. AFAIK CSS-standard would be inline elements inheriting line-height in absolute computed terms when for the parent the line-height is set in % or em. This doesn't work with KF8 for Kindle own fonts or for embedded fonts. So - one can say - KF8 isn't css-compliant. As I'm new to ebook-formatting I hoped for some css that work with KF8 when I asked the question. The float- and the svg-things are clever but I don't think it is worth the effort to "out-fox" a restriction apllied by Amazon with intention. Thank you again!

Advert

Advert