A bit of css help for a Kindle Fixed template

holdit · 02-28-2014, 01:32 PM

I have a nice Kindle Fixed Template, I created a .mobi file using images of a pdf converted to jpgs for the pages. reason was the InDesign file used 10 different fonts and I needed the layout to look exactly the same.

Got it to look and work fine.

Now on certain pages I need to have live links so I did a little css and have embedded ONE font I know Kindle will display for these links. I just need to know how I can use this css page with the links ( I have one other css page that does not have links) as I will now add the re designed images where the link font is left blank so I can place the links where they were directly on the page using html and css.

There are 50 pages in the book and 10 of them have links. I thought of doing the following:

Page 1 have paragraph1 2 and 3 as <divs> create the css for those

then on lets say page 9 I have more links which go in different spots on page 9 so call those divs xxxname create css for this and so on.

Is this the correct way or is there another method?

See the screen shots

susan_cassidy · 02-28-2014, 04:38 PM

It would be better to have the document converted to text. It is very hard to embed links in an exact spot, that would still work at different font sizes.

Hitch · 03-01-2014, 04:06 AM

Do I understand your request correctly?

I can't tell from looking if you've made a real fixed-format mobi, or if you've simply created a book made up of images. If you've created a book that is entirely made up of jpegs, and NOT a fixed-format mobi, what you want to do cannot be done; you cannot use anything like a "map" to place a link on an image; not in a specific place. you could obviously make the whole image a link, BUT, if you didn't use fixed-format, the image will enlarge when clicked, not launch a link.

So, that second image, the one with the "donate" link on it, is an image, right? (It certainly looks as though it is).

Sorry, but unless you're going to get into the mechanics of making an actual fixed-format MOBI, using Region Magnification and JSON, along with x-y coordinates, positioning the link is going to be impossible. This means that you'll have to use the same methodology as "pop-up" text in KF8. I'd recommend that you download the Fixed-format samples from Amazon and use the coding that they demonstrate for the RM boxes to position a pop-up for each area in which you want a link. That's the only way it's going to work.

The RM pop-ups ONLY work on books coded as fixed-format mobis, so this won't work if you simply have one page after another of jpegs, which is what I suspect you have (because you say it "validates," which says to me that you made an ePUB and ran it through ePUBcheck, but a fixed-format mobi file wouldn't validate. You may be using that term to mean something else, but that's what I'm inferring.)

By the way: I think you may want to prepare yourself for some complaints from readers with smaller devices. Fixed-format mobis can be read on Droid SmartPhones, and that much text on a fixed-format screen/jpg is going to be very difficult to read on a small screen, as you've taken away the readers' ability to size the font as they wished.

Hitch

02-28-2014, 01:32 PM	#1
holdit Connoisseur Posts: 86 Karma: 470352 Join Date: Dec 2012 Device: Kindle Fire, IPad	A bit of css help for a Kindle Fixed template I have a nice Kindle Fixed Template, I created a .mobi file using images of a pdf converted to jpgs for the pages. reason was the InDesign file used 10 different fonts and I needed the layout to look exactly the same. Got it to look and work fine. Now on certain pages I need to have live links so I did a little css and have embedded ONE font I know Kindle will display for these links. I just need to know how I can use this css page with the links ( I have one other css page that does not have links) as I will now add the re designed images where the link font is left blank so I can place the links where they were directly on the page using html and css. There are 50 pages in the book and 10 of them have links. I thought of doing the following: Page 1 have paragraph1 2 and 3 as <divs> create the css for those then on lets say page 9 I have more links which go in different spots on page 9 so call those divs xxxname create css for this and so on. Is this the correct way or is there another method? See the screen shots Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Placing hyperlinks in a Kindle fixed layout template	holdit	Kindle Formats	4	12-01-2013 02:46 PM
Looking for help in developing workflow, css, InDesign template	mcoleman	ePub	3	07-24-2013 05:43 PM
Kindle newbie needs "template" HTML & CSS	Rich_H	Kindle Developer's Corner	12	09-10-2012 11:16 PM
Kindle Newbie needs "template" HTML & CSS	Rich_H	Workshop	4	09-10-2012 08:33 PM
CSS template for epub for the mobi conversioin	vogella	Kindle Formats	5	11-02-2011 08:19 AM

02-28-2014, 04:38 PM	#2
susan_cassidy Wizard Posts: 2,251 Karma: 3720310 Join Date: Jan 2009 Location: USA Device: Kindle, iPad (not used much for reading)	It would be better to have the document converted to text. It is very hard to embed links in an exact spot, that would still work at different font sizes.

03-01-2014, 04:06 AM	#3
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	Do I understand your request correctly? I can't tell from looking if you've made a real fixed-format mobi, or if you've simply created a book made up of images. If you've created a book that is entirely made up of jpegs, and NOT a fixed-format mobi, what you want to do cannot be done; you cannot use anything like a "map" to place a link on an image; not in a specific place. you could obviously make the whole image a link, BUT, if you didn't use fixed-format, the image will enlarge when clicked, not launch a link. So, that second image, the one with the "donate" link on it, is an image, right? (It certainly looks as though it is). Sorry, but unless you're going to get into the mechanics of making an actual fixed-format MOBI, using Region Magnification and JSON, along with x-y coordinates, positioning the link is going to be impossible. This means that you'll have to use the same methodology as "pop-up" text in KF8. I'd recommend that you download the Fixed-format samples from Amazon and use the coding that they demonstrate for the RM boxes to position a pop-up for each area in which you want a link. That's the only way it's going to work. The RM pop-ups ONLY work on books coded as fixed-format mobis, so this won't work if you simply have one page after another of jpegs, which is what I suspect you have (because you say it "validates," which says to me that you made an ePUB and ran it through ePUBcheck, but a fixed-format mobi file wouldn't validate. You may be using that term to mean something else, but that's what I'm inferring.) By the way: I think you may want to prepare yourself for some complaints from readers with smaller devices. Fixed-format mobis can be read on Droid SmartPhones, and that much text on a fixed-format screen/jpg is going to be very difficult to read on a small screen, as you've taken away the readers' ability to size the font as they wished. Hitch

Advert