|
Grand Sorcerer
Posts: 6,212
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
Worked example of font customisation for PRST1 modified reader app
First of all let me say that I know the title of this thread is 'Modified Sony home screen'. These detailed notes are relevant only to those using Morkl's modified reader app - not his modified home screen app.
I have assumed no previous knowledge of css ( Cascading Style Sheet) or html (HyperText Markup Language), so apologies if this is rather long - try not to let it put you off 
In summary, if you want to use the modified reader app to customise your fonts, the configuration file, [READER Drive:] \reader\reader.xml, is used in conjunction with 7 css files, which you create yourself using a simple text editor. You then place the 7 css files in the directory [READER Drive:] \reader\css There are some samples included in Morkl's June downloaded zip file.
I'm going to be using a worked example where all of the 3 default fonts (i.e. serif, sans-serif and monospace) have been customised to: - serif: Charis SIL, a slightly darkened version of the standard free version, kindly posted by JSWolf in post #319 of this thread
- sans-serif: Frutiger Neue, one of the T1's built-in sans-serif fonts
- monospace: a free Hewlett-Packard font, called Dark Courier (Google it)
They are the fonts you'll see if you pick 'Original' in the select-a-font list accessed via Menu - Font - Selected Font Type.
Here is a detailed step-by-step for customising fonts, assuming you have already done the installation procedure for the modified reader app: - Copy all the non-built-in font files you might ever want to use (4xCharisSIL, 4xDark Courier in the worked example) to directory [READER Drive:]\reader\fonts
- Create your configuration file, [READER Drive:]\reader\reader.xml using a simple text editor, or edit Morkl's included sample file. This is my worked example:
- Create your 7 custom css files and place them in directory [READER Drive:]\reader\css
The 7 .css filenames are highlighted in blue in the above reader.xml file
The corresponding labels you will see in the T1's select-a-font list are highlighted in red in the above reader.xml file.- The first css file to create is [READER Drive:]\reader\css\default.css, and is where the bulk of your effort goes. Here is the contents of default.css in this worked example.
Also see default.css - explanatory notes below for details of what each line does.
- The other 6 css files. These are much faster to create. You need to choose the other 6 fonts you want to appear on your select-a-font list. In each of these 6 css files you only need to include the bits you wish to be different from what is already in default.css. You can choose from the many built-in fonts (as listed in the Wiki) or from any you have copied into [READER Drive:]\reader\fonts
Here are 3 examples:- You want the built-in Amasis serif font to be one of your choices and are happy to use the same margins, line spacing, sans-serif & monospace fonts as previously defined in default.css This could be your Amasis.css file:
- You actually prefer to read books with all the body text in a sans-serif font, such as the PRST1 built-in Verdana font.
This could be your Verdana.css file, note that both serif and sans-serif are pointing at the same .otf font file:
- You like the built-in Really No2 font but you'd like a bit more space between each line for this font. This could be your ReallyNo2.css file:
default.css - explanatory notes, line by line:
Spoiler:
- The 4 font files (regular, italic, bold, bolditalic) making up the Charis SIL serif family are defined in the first 4 lines
@font-face {font-family: serif; ...}
Note the directory path in the URL, res:///ebook/fonts/../../mnt/sdcard/reader/fonts/
This is the directory you can visibly see as [READER Drive:]\reader\fonts (in Windows parlance) when your T1 is connected
- The 4 font files (regular, italic, bold, bolditalic) making up the Frutiger Neue sans-serif family are defined in the next 4 lines
@font-face {font-family: sans-serif; ...}
Note: the directory path in these URLs, res:///ebook/fonts/ is different to the one for Charis. This directory is not visible to the user, it is the T1's internal built-in font directory.
If you are already happy with the T1's existing sans-serif font, omit these 4 @font-face lines.
- The 4 font files (regular, italic, bold, bolditalic) making up the Dark Courier monospace family are defined in the next 4 lines
@font-face {font-family: monospace; ...}
and are created just like the Charis ones, i.e. pointing to your visible, manually-copied Dark Courier fonts
As before, if you can't be bothered changing the default monospace font, just omit these 4 lines.
- The line @page {...} (optional) can be used if you want to create small white-space margins around each page of your epub. Whether you want these page margins is up to you. If you don't, it is better (IMO), to set all 4 margins to zero, rather than remove the line. This is because applying zero margins here, should neutralise any @page already existing inside a particular epub, which may not be non-zero.
- The final line, body, body.book, body.text, body.calibre,...{...} is attempting to use your preferences to override what may already be set in the css file contained in each individual epub. You can be quite creative with this depending on your knowledge of css. For this example I have only included 4 simple lines:
- font-family: serif; try to force the epub to use your custom serif font, Charis, for all body text
- line-height: 1.2; to set the line-spacing
Adjust the 1.2 up or down to suit your preferences. Note: line-height: 1.2 and line-height: 120% are equivalent.
- margin-left: 0; margin-right: 0; try to neutralise any over-large left/right margins that may already be inside an epub. Any non-zero left/right margins in here are added to whatever you might have in the @page{...}
Retail epubs are notorious for specifying margins so large that you are reading your whole book as a 3inch strip down the middle.
- text-align: justify; try to force each epub to have a straight edge on both left and right sides
if you prefer a ragged right edge set it to text-align: left
Whichever you choose, it's only going to work some of the time due to the cascading nature of css. It may not be possible to do a simple override, like this, on what is already inside the epub's own css file. Personally, I don't add this line, I choose to do the necessary manual changes inside each individual epub, but not everyone can be bothered. (Can't say I blame them )
- Why is there a long comma-separated list of body items in that last line?
- body
- body.book
- body.text
- body.calibre
- body.calibre1
- body.calibre2
- body.calibre3
- body.calibre4
The answer is that it's an ever-growing list of ways in which each individual epub may have defined its html code. You're trying to cover all eventualities. Still doesn't make sense? Nevermind, include them all, anyway. The first 3 are often found in retail epubs, the last 4, not surprisingly, are often found when the epub has been created by a calibre some_format-to-epub conversion. I could explain further, but as this post is aimed at people with no knowledge of html/css, I won't unless specifically asked.
General notes:- I'm not 100% sure of my facts here... If you are going to customise any fonts you must create all 7 css files and put references to all 7 (default + 6 others) in the reader.xml file.
[Edit:Morkl suggests there may be dire consequences if you list less/more than 7. Be warned!]
- In the reader.xml file you can list the 6 custom css files in any order you like. This is the order in which they will appear in the PRST1 select-a-font list, after 'Original'.
- I believe custom font files on a Sony need to be either TrueType (.ttf) or OpenType (.otf). Find them wherever you'd normally look for free font files, e.g. inside your Operating System directory, internet free font sites. Caveat: Not all font files look as good as you might expect -- trial and error I'm afraid. If you're a font fanatic don't be surprised if it takes many hours (days) to finally complete your perfect list of 7.
- Please remember at all times, on a PRST1, all paths, filenames, extensions are case-sensitive, unlike Windows.
- On a PRST1, when using the slash in a directory path, its a forward-slash (/) -- unlike Windows where it's a back-slash (\).
- However much effort you put into your 7 css files, you will find some epubs which won't use your preferences. In these cases the only way to beat them into submission is to open them up (in Sigil or calibre Tweak ebook) and get your hands dirty in the css file within to remove the bits which are overriding your preferences. This requires some knowledge of html and css. No way round it but to learn a bit or learn to be less picky, I'm afraid -- entirely your choice .
I'm going cross-eyed at this point, so I'm going to call it a day for this first draft. If anyone spots anything which could be explained better, please let me know (politely) and I'll update accordingly.
Last edited by jackie_w; 07-18-2012 at 11:29 AM.
Reason: extra warning added
|