I couldn't find any other comments regarding the css line-height property. But it doesn't seem to work correctly in Prince. The space between the first line that uses the first-letter selector is larger than the spaces between other lines. It's not quite double, but perhaps it is 1.4 times the normal spacing.

I looked at the books published using Prince on Amazon. com and I notice those books exhibit the same issue. Is there no technique to correct that?

Prince is amazing and the fact that it can be used to produce the books as shown is excellent proof.

Thanks!

Frank

If first-letter is being used to increase the font size, that may affect the line-height of the line that it is on. What if you apply "line-height: 0" to the first-letter? Can you paste an example that demonstrates the problem?

Yes. I will find an example and see if it will paste properly. However, I doubt it will.

But, when you use css to enlarge the first letter, you typically set the base of that letter to align with the base of the remaining sentence. The problem is that the space below that line of text is larger than normal. Typically the way you solve that is to set the line space with css like shown below (line-height: 100%;). The following css first sets the first-letter of a section to be 3x larger than the rest of them. Then the next line sets the space below the first line of text to be sized normally. If you don't use the second command, the space below the first line of text will be larger than normal. However, Prince seems to ignore the second command. Therefore the space under the first line of text is perhaps 1.5x larger than normal spacing. This condition can be seen in the Amazon . com books that were made with Prince.

div.chapter p:first-letter {
font-size: 3em;
font-family: diploma;
}

div.chapter p:first-line { line-height: 100%; }

.Chapter_Number { string-set: stringChapterNumber content(); float:left; font-size:24pt; line-height: 21.5pt; margin: 0; padding: 0 6pt 0 0; }

The float allows you to create drop cap style.

Jim Albright
Wycliffe Bible Translators

1. chapter number.png‎ 12.3 kB

Nice Jim.

I used just the line-height: 21.5pt; piece in my css sheets. I varied the '21.5' from 5 to 75. The html version shows the differences, but when Prince converts the html to pdf, those figures are ignored.

I am attaching a graphic depicting my problem. Assuming the attachment works, you will see the space under the first line is greater than the space under the second. And I can't come up with a way to fix that.

1. FirstLetter.jpg‎ 42.6 kB ‎
   Show the difference in line spacing after conversion from html to pdf by Prince

Prince does not support the ::first-line pseudo-element, so any solution can't rely on that for the time being.

Try adding the

float: left ;

to see if that will solve your problem.


Also try

line-height: 0 ; 

as that sometimes fixes these kind of problems.

Jim Albright
Wycliffe Bible Translators

Thanks for the help. Here is the results of using float and line-height:0. The top image is from the html version of the file. The bottom image shows that Prince ignores float and the line-height setting. I believe I had read that Prince ignores float. But not sure.

In any event, Prince does fine. It isn't a big deal that the top space is larger. I just wanted to fix it if there was a way.

Again, thanks for the support.

1. html float 0 line height.jpg‎ 27.4 kB
2. prince float 0 line height.jpg‎ 36.8 kB

I'm still intrigued by your problem. Can you post the html and css please. What happens with different font?

Jim Albright
Wycliffe Bible Translators

Thank you for your interest Jim. Other fonts display the same issues. (I didn't try a lot of fonts, but I did try several).

Here is the css:

div.chapter h6 {
font-size: 10pt;
font-weight: normal;
}
div.chapter h6:first-letter {
font-size: 3em;
font-family: diploma;
}
div.chapter h6:first-line {
line-height: 100%;
}

here is the html:

<div class="chapter" ><h6>If I were to write about my childhood and not first write about my mother, many would wonder where she was when I was staying with various people. &nbsp;Since they might be inclined to assume she was negligent or irresponsible, I am compelled to ............. </h6></div>

I think the css and html code is pretty straight forward. But like MikeDay says, Prince does not recognize line-height yet ... Also the books for sale on Amazon.com that were created with the help of Prince, exhibit the same issue. If you do figure out a solution, that would be great!

Thanks again Jim,
Frank

Here is an example from a book published with Prince and is sold on Amazon.com. I had mentioned this in this thread previously. The piece I pasted below shows the enlarged space below the first line of the paragraph.

In any event, it is amazing that Prince works so nicely to convert from html to pdf as evidenced by this book.

http://www.amazon.com/Advanced-Aquarists-Online-Magazine-2007/dp/143823029X#_

I found this link as I was reading various posts in this forum. the thread is entitled, Book Examples Formatted with PrinceXML. Truly great examples of how well Prince works.

1. fish eyes article.jpg‎ 17.2 kB

Frank, in the example you posted just add "line-height: 0" to the first letter:

div.chapter h6:first-letter {
font-size: 3em;
font-family: diploma;
line-height: 0;
}

Problem solved?

Mike,

YES - That fixed it!!!! Perfect! I am attaching a view of the results of your fix below. This is a part of a 141 page, 52 chapter 'blog book' that is converted to pdf entirely with Prince - from cover to index.

You should be proud of Prince's performance. I know how difficult and challenging this project this has been.

Thanks so much for your ongoing support.

However, just when you thought you were done with me.... I have been using the Windows version of Prince on my computer. I am now attempting to install the Linux version on the shared host I subscribe to. And of course, I don't have total access by any means to the server. I am stuck in my allotted space. Presently reading threads to figure out where to place the directories. So far, I have found no reason why it shouldn't work.

Again Mike, thanks so much for your efforts and time.

Frank

1. Prince Perfect.jpg‎ 38.7 kB

I think the problem was related to space allowed for descenders ... which you do not have for cap letter. Using line-height: 0 nullifies this extra space.

Jim Albright
Wycliffe Bible Translators

Thanks Jim.

For a test, I just changed my styles sheet such that it does not change the font family for the first letter. And that font does not have descending capital letters. But you will see the first line space is larger.

But with yours and Mike's help, it is solved.

You had suggested something very similar to Mike's solution. But I failed to put the line-height [element?] under the first-letter css element.

Thank you for your ongoing support and time Jim.

I am amazed at how nice the resulting PDF document looks.

Frank

1. font.jpg‎ 33.8 kB

If you use a first letter with a descender, eg. a lowercase "g" or "y", then it will be obvious why the first line has more line-height. But since you know you are only going to use an uppercase letter, there is no problem.

Regarding installing Prince on Linux, you can install it anywhere, including in your own home directory, it does not have to be installed in a system directory.

Thanks Mike.

Jim was correct, however, because I am actually using 'diploma' fonts. And those do have some descending capital letters. Some almost touch the line below. I did not show those in my examples however.

I started a new thread in hopes of receiving some guidance with installing Prince on Linux. I am glad to hear it should work. Perhaps other people new to Prince will be able to take advantage of what I am about to learn.

Frank