4 replies [Last post]
Brahmanathaswami
Brahmanathaswami's picture
Offline
newbie
Kauaia, Hawaii
Last seen: 6 years 5 weeks ago
Kauaia, Hawaii
Timezone: GMT-10
Joined: 2014-07-04
Posts: 2
Points: 3

For years (1995 --> 2006) I coded our books in HTML by hand; it was very painful. Then in 2008 we redesigned our site using a model view controller dynamic page assembly system (LiveCode/RevIgniter). Also we started having all our books turned into EPUB using an outside service. Then we took these EPUB files which are just zip files and inflated these on the Web server then using some savvy scripting we are able to display these online as webpages just by pushing the EPUB files through the template/view. Here's an example:

http://www.himalayanacademy.com/book/dancing-with-siva/11

This solved a major challenge–the CSS for the content inside iFrame is able to style the book and not have any conflicts with the styles for the main rapper/template of the site.

The problem with this system is that Google indexes the page and sees the content inside the iFrame as an independent webpage. When users click on search links they end up stranded with no wrapper no navigation and no sidebar. Links in Googles Index take them to pages like this:

http://himalayanacademy.com/media/books/dancing-with-siva/web/ops/xhtml/fm_10.html

Meanwhile each month I take a monthly newsletter from the web push it through premailer.ca and get all the styles in-line for a lovely HTML e-mail distribution today I had an "aha" moment today where I thought we could take the Book pages get CSS in-line and then run these inside our template.

This actually took me only about two minutes to try and here's the test result:

New Method: Take text --> run styles inline --> output via RevIgniter views

http://dev.himalayanacademy.com/readlearn/books/test-book-page

But this method has two issues

1. The CSS for the main wrapper (/assets/css/styles.css) takes precedence over some of the elements in the book div
2. also this method of pushing styles in-line breaks the paradigm where CSS and HTML are separated so that HTML semantic markup is very lean. Running styles in-line seems very retro and leads to horrible bloat.

One is immediately tempted to think we could tweak styles in the main CSS file to take care of issues in the in-line book text but the problem is with a hundreds of publications in the pipeline and we have no guarantee that the CSS or HTML elements will have any consistency across all these publications. Hence the need for a generic solution to separate and encapsulate the styles that run for an interior div on the page.

Here's a sample markup. See my in line comments. Does anyone have any ideas on how to make sure the CSS for the main page and the CSS for the interior section do not conflict with each other or override each other. In some programming environments we call this "encapsulation" of a segment of code where vars, globals etc. are independent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Book Page Inside Site Template</title>
		<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="screen, projection" />
 
	</head>
	<body>
      <!-- 
		HTML here for main site template, header, navigation, side bar etc.   
		 --> 
      <div id="interior-book-page">
        <!-- 
		 # We want to encapsulate this HTML
         # with its own unique CSS 
         # that will be segregated and not conflict with
         # the main site css
		 -->
    </div>
 
       <!-- Footer from main template   -->
 
	</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

On the way, maybe

Am having issues posting my reply, so am trying an end-around. Be patient. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

1) The styles need to be in a

1)
The styles need to be in a css file. Inlined styles apply only to the element to which they're attached. Thus, <p style="color">...</p> does not apply to <p>...</p>. The second will revert to whatever it has inherited or to the current default declaration.

2)
Another issue lies with the various epubs having different styles (did I read you correctly on that?). That pretty well makes automation a lost cause. That doesn't mean that each new epub conversion can't use a standardized style sheet. I've had people complain that they want the epub/Word doc or whatever to look like the original, forgetting that these are different media that are not more than remotely compatible with html. It is an error to try to make them fit the wrong hole.

3)
Regarding iframe or object elements: In the imported document, add <a href="http://example.com/" id="callhome">Go to the parent page</a>. That will provide a path to your site.

4)
Order matters. Be sure your main or base stylesheet is loaded first, before a sub-stylesheet for the epub is loaded. Any conflicts due to equal specificity are resolved in favor of the last read. This will also simplify de-bugging. Create a namespace for the epub by giving the div that wraps the epub content an id, e.g. "epub". An element selector as a descendant of an id is hard to override, i.e. #epub p {} will rule.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

That's enough for now. Once

That's enough for now. Once you've decided on a direction to take, suggestions can become more specific, though from your background comments, I think you'll figure it out. Do post any problems my ideas might have.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Brahmanathaswami
Brahmanathaswami's picture
Offline
newbie
Kauaia, Hawaii
Last seen: 6 years 5 weeks ago
Kauaia, Hawaii
Timezone: GMT-10
Joined: 2014-07-04
Posts: 2
Points: 3

I think I have a solution...

I think I have a solution... I posted a longer explanation, but this site keeps not accepting posts..

see source for

http://dev.himalayanacademy.com/readlearn/books/test-book-page-w-styles