Hacked AdobeViewer.app with userstyle1.css

[fjtorres]

Originally Posted by mtravellerh

Well yes. I thought that was obvious. Sorry that I didn't make that clear.

Stating the obvious is my specialty.
No apologies needed.

[Mickey330]

Well, I'm late to the party, tselling, but thanks for this hack! I've just installed it, put my own font information in and it's working great.

I read my own books (mostly epub) in FBreader180, but I am a regular visitor to the online libraries for which I have accounts. This makes it MUCH easier to read the library books.

Karma to you for this!

Marilyn

[Logseman]

Could anyone prepare a sort of tutorial for the CSS style sheets?

[jackie_w]

Hi Logseman,
Not really a tutorial but a simple example you could customise to your own preferences. Anyone else feel free to chip in if I've missed something.

1. Copy tselling's hacked file AdobeViewer.app into directory system/bin on the PB360. Make sure you use tselling's hack which corresponds to the PB360 firmware version you're using, i.e. 14.2 or 15.2
   
   
2. Copy the .ttf font files you want to use into the system/fonts directory. Make careful note of their filenames, they are case-sensitive.
   
   
3. Copy the following into a text file called userStyle1.css (case-sensitive) and copy to the root directory of your PB360 (see notes below for some description). This example uses the Charis SIL font family as the serif font. It is free.
   
   

   @font-face {font-family:serif; font-weight:normal; font-style:normal; src: url(res:///mnt/ext1/system/fonts/CharisSILR.ttf);}
   @font-face {font-family:serif; font-weight:normal; font-style:italic; src: url(res:///mnt/ext1/system/fonts/CharisSILI.ttf);}
   @font-face {font-family:serif; font-weight:bold; font-style:normal; src: url(res:///mnt/ext1/system/fonts/CharisSILB.ttf);}
   @font-face {font-family:serif; font-weight:bold; font-style:italic; src: url(res:///mnt/ext1/system/fonts/CharisSILBI.ttf);}
   
   html {font-family:serif;}

4. Not sure whether this step is necessary but I switch the PB360 off at this point, then re-boot it.
   
   
5. Now open an epub file with AdobeViewer and you should see the fonts you specified in userStyle1.css

Notes:

• The first 4 @font-face lines of the example CSS file specify the exact locations where your selected serif fonts, Charis Regular, Italic, Bold and BoldItalic are to be found.
  
  
• The last line (html...) tells AdobeViewer to use the fonts listed in the first 4 @font-face lines whenever the epub wants to display serif.
  
  
• If your epub has its own fonts physically embedded inside, as some commercial ones do, then these would be used (I think) in preference to yours.
  
  
• Once you get it working you can add 4 lines to specify your preferred sans-serif fonts.
  @font-face {font-family: sans-serif; ...}
  
  
• ... and your preferred monospace fonts.
  @font-face {font-family: monospace;...}
  
  
• You can even specify a SmallCaps font if you get adventurous.

[tomh]

By trial and error I added a couple things to set text size, spacing between lines in a paragraph, and get a little breathing space between paragraphs. Maybe somebody can show better ways to get these done.

The settings were added to the p {...} block, which I assume means they apply to all paragraphs. The values are:

p {
font-size: 18pt;
line-height: 105%;
padding-top: 5px;
padding-bottom: 6px;
orphans: 1;
widows: 1;
}

The settings for orphans and widows were already in the p block. Looks like a semicolon is used to separate entries within the {...} block.

Notes:

(1) The font-size setting can take different units. The one I used, pt, seems to mean typographic "points". I also saw another, px, which seems to mean pixels. Both unit types give absolute sizes, there seem to be other units that are for giving relative sizes but this is beyond me at the moment.

(2) The line-height setting seems to make line-to-line spacing xxx percent of the font height.

(3) The padding-top and padding-bottom seems to leave a little space before and after the paragraph. Again, different units are possible, including relative ones, but I chose pixels because it seemed the simplest.

[Logseman]

Many thanks! Once I can give K again, count on having it

[tselling]

tomh,
you are correct in what you have decipered of the CSS. One thing to note is there is a difference between margin and padding:
http://blog.webassist.com/2010/01/th...s-and-padding/

which seems to really only matter if you use borders. However the margin and padding added together is the whitespace you will see around your text.

The hardest part seems to be getting the settings to apply correctly. Because if a particular font is appled in the "p" (paragraph) block then if will take priority over what you set in the "html" or "body" block. And then you can have classes for the elements and that adds a whole new dimension.

[fjtorres]

Originally Posted by Logseman

Could anyone prepare a sort of tutorial for the CSS style sheets?

This one is a general CSS tutorial:
http://www.brainjar.com/css/using/

This is the W3 CSS 2.1 spec document in pdf:
http://www.w3.org/TR/CSS2/css2.pdf

Will probably take some experimenting to see which tags and properties are supported by AdobeViewer.

[tomh]

tselling,

Thanks for your help. FWIW, I originally tried margin-top and margin-bottom and they seemed to do nothing, even with order of magnitude jumps in values. The padding-top and padding-bottom worked.

The articles noted by fjtorres are better than what turned up in my web searches. I look forward to learning more. His statement "Will probably take some experimenting to see which tags and properties are supported by AdobeViewer." is important. How true!

[tselling]

Originally Posted by tomh

tselling,

Thanks for your help. FWIW, I originally tried margin-top and margin-bottom and they seemed to do nothing, even with order of magnitude jumps in values. The padding-top and padding-bottom worked.

The articles noted by fjtorres are better than what turned up in my web searches. I look forward to learning more. His statement "Will probably take some experimenting to see which tags and properties are supported by AdobeViewer." is important. How true!

Padding probably worked more easily because its not used much in ebooks so there wasn't more specific CSS code to override it. For margin to work in quite a few of my library books I had to use p.indent and p.nonident along with p... but I was using it more to make the left and right margins smaller since when I made the font bigger the margins got bigger and I wound up with like 3 words per line.

[jackie_w]

Now that the official firmware v15.2 is out, will we need a new version of the hacked AdobeViewer?

I really don't want to upgrade until I know I can have the hack as well. Pretty please.

[fjtorres]

I updated and the hacked 15.2 version is running fine for me.

[jackie_w]

Thank you. That's good to know.

However, if any last-minute fixes were applied to standard AdobeViewer in v15.2 (am I being over-optimistic? ) then presumably they wouldn't be in the current hacked version.

[doremifaso]

I have just tried out the Hacked AdobeViewer in v14.2. I found that if there are fonts specified in the epub file, PB360 would not override those settings with the ones I specify in userstyle1.css. But if there are nothing specify in the file, it will use the fonts in userstyle1.css.

How do you override the styles embedded in the file?

[doremifaso]

Alright, I finally got it working. Since my files have some fonts embedded, I need to specify the same font name in the userstyle1.css file in order to use the fonts in the system/fonts directory.