How do you embed an .epub in a web page? - html

Is there a viewer or plugin of any kind that would allow an .epub document to be viewable on a web page? A Google search turned up tons of installable epub viewing desktop software but I couldn't seem to find anything for embedding this format on a web page. Perhaps you folks have some insight into this?

epub files are just HTML/XML and CSS, so you could easily open the epub container (it's a zip), then parse the XML inside using a language like PHP.
It shouldn't be too difficult to do that.
The format looks like:
--ZIP Container--
mimetype
META-INF/
container.xml
OPS/
book.opf
chapter1.xhtml
ch1-pic.png
css/
style.css
myfont.otf
Here's an example of the content you might find in chapter1:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Pride and Prejudice</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
...
</body>
</html>

I'd suggest that this should in most cases be done with Javascript using a library like one of these How to read epub files using javascript

Related

How to open HTML file as words not codes using notepad++?

I have article saved as HTML Formula and when I open that article by notepad++, the notepad++ open the article as codes not as words like that
(<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <meta HTTP-equiv="Content-Type" content=" text/html; charset=UTF-8" />
Notepad++ doesn't support visual editor for html files.
It's just a kind of source code editor something like visual studio code.
But you can see the html formula with dreamweaver, webstorm and so on since they support visual editor for html files.

Flash (swf) can't play automatically in Google Chrome

My web site has got swf files where their heights are smaller than 298px and which are not auto-played in Google Chrome.
I tried autoplay=true, play=true, ... but with no success.
How can I play automatically those SWFs?
Example :
This is not possible in more and more browsers.
It's time to embrace HTML5 and re-write or convert your SWFs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd "><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd "><HTML>
<HEAD>
<TITLE></TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
works for me, i think the issue is you have to work with html previous to html 5

Is it possible to package multiple HTML files in an MHTML file and navigate between them?

So I might be thinking of the wrong file format, but I remember as a kid opening files that looked like a Windows 98 help window:
I thought it was an MHTML file, and it allowed me to navigate between the packaged pages. Am I thinking of the right format?
MHTML allows HTML with links as a standalone file, as described here. Many online tools will create one for you.
.MHT files are also single HTML files.
Winfows 98 actually used a compiled HTML file - ie a .CHM
When I needed something similar, I created a frameset in main.htm file like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>My framed webpage</title>
</head>
<frameset cols="25%,*">
<frame src="toc.htm">
<frame src="content.htm" name="content">
</frameset>
</html>
toc.htm - table of contents, a list of links referred to content.htm file by id (with list of elements Link Title Name with ids toc_0 ... toc_n). Right frame in result file.
content.htm - content file with links with ids toc_0 ... toc_n you want to refer to. They might be any h* elements. Left frame in result file.
If you use Java, then Jsoup is your best friend.
<frameset> tag is deprecated HTML tag The tag is not supported in HTML5
UPD. When you have three files main.htm, toc.htm and content.htm just open a main one. Previously there was a flag in Chrome experimental features to save as a MHTL and you had only to activate it, but now seems they have removed it.
However you can use a Save as MHTML add-on instead.

css working in one file but not the other

I have two html files using one css file. The one is working the other is not.
In the first 'working' case, the html syntax is (css file is in the same directory):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Our first page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ourstyle.css"></head>
In the second 'not working' case, the html syntax is (css file is in one folder up):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Our second page</title>
<link rel="stylesheet" type="text/css" href="../ourstyle.css"></head>
When running both files locally, the css file works, but on a server it does not.
I am using javascript and jquery in the second html file. I did what they suggested in the question on Two Linked CSS Files Not working but still did not work.
Please help.
PS This is my first question I am asking, so please let me know if I was not specific or clear enough. Thank you.
To clarify:
I don't have ourstyle.css in two separate directories in my local environment nor on a server. I have it only in the parent directory. So practically, I have the parent folder WWW, in which I have the 3 things:
1. the 'working' html script (with syntax 'href="ourstyle.css"')
2. the file ourstyle.css
3. the folder called cgi-bin, in which I have the 'not working' html script (with syntax 'href="../ourstyle.css"')
The same folder structure I have locally and it is running. On server it does not.
Thank you for your help.
Rather put ourstyles.css into a folder (like CSS) and then refer to them the same, i.e. /CSS/ourstyle.css (and not ../ourstyle and outstyle). Putting your scripts in js folders and styles in css folders is good practice. You will thank yourself later when you are working with lots of files.

Html encoding defaults to "Western (ISO-8859-1)" locally

Lets say I have the following file in called index in the directory D:\Experimental:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Minimal XHTML 1.1 Document</title>
</head>
<body>
<p>This is a minimal XHTML 1.1 document.</p>
</body>
</html>
If I open the link
file:///D:/experimental/index.html
I get to see the html, but it seems that the character encoding defaults to Western (ISO-8859-1), I can see this when I click view -> character encoding in firefox.
I want to display this in UTF-8 because Western (ISO-8859-1) doesn't display some characters correctly. Does anyone know how to fix this?
You should include:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
in your HEAD element.
Edit
I've just tried your example in Firefox on the Mac, and even without the meta tag, it correctly interprets the document as UTF-8. The Standard seems to indicate that it should use the XML processing instruction, but that you should also use the correct HTTP headers. Since you're not sending headers (because you're not using HTTP) you can specify them with the meta tag.
Maybe try adding
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
in <head> section?
When loading files from disk, your browser does not have an HTTP Content-Type header to read the encoding from, so it guesses. To guess the document encoding it uses your operative systems current encoding, the actual bytes that are in the files and information inside the file itself.
As Jonathan wrote, you can add a
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
element that will help the browser using the correct content type. Anyway, note that that element will often be ignored by browsers if your document is sent from a misconfigured HTTP server that explicitly specifies another encoding the Content-Type header.