I'm working on a reader, and we used to work on epub2, and I working on pagination effect using CSS file. I have recently received an ePub 3 file and it does not abide by the CSS rules that I have provided, although it works correctly when tried on Play Books android app.
Note that I have manipulated several features related to web view such as:
testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);
and this is the paging CSS used which as mentioned before works perfectly on epub2 files
html {
height:heightplaceholderpx; //set dynamically depending on phone screen size
width:100%;
}
body {
margin:0px;
padding:0px;
width:100%;
pointer-events: none;
}
#viewer {
width:widthplaceholderpx;
height:heightplaceholderpx;
}
#book {
width:widthplaceholderpx;
height:heightplaceholderpx;
margin-left:50px;
margin-right:50px;
margin-top:10px;
-webkit-column-count:auto;
-webkit-column-width:widthplaceholderpx;
-webkit-column-gap:100px;
text-align:justify;
}
.h {
margin-top:60px;
margin-left:100px;
margin-right:100px;
}
img {
max-width: 100%;
height:auto;
}
This is how I'm integrating the CSS file:
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<link rel="stylesheet" href="columnPaging.css" type="text/css" media="screen"/>
headplaceholder //the header extracted from the xhtml file of the book
</head>
<body>
<div id="viewer">
<div id="book">
bodyplaceholder //the body extracted from the xhtml file of the book
</div>
</div>
</body>
</html>
Like you can see you use this var widthplaceholderpx in his css. Normally it should be override it in the Java code. But when the bodyplaceholder was add to the body in the HTML I needed to override the widthplaceholderpx again. So the css would know what the actual height was.
I want to EDIT an HTML text in a UITextView, this text was created in a web version of the app that allows you to create text with HTML editor (The edit will be with a default font in iOS)
I get the text to be edited in a simple html as below:
<p><b>html</b> <u>html</u> <i>html</i></p>
But after editing it, I get the html text in UITextView with the code:
NSDictionary *exportParams = #{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType};
NSData *htmlData = [_txtDescricao.attributedText dataFromRange:NSMakeRange(0, _txtDescricao.attributedText.length) documentAttributes:exportParams error:nil];
NSString *descHtml = [[NSString alloc] initWithData:htmlData encoding:NSUTF8StringEncoding];
HTML text is returned with CSS styles, as shown below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px 'Helvetica Neue'; color: #000000; -webkit-text-stroke: #000000}
span.s1 {font-family: 'Helvetica Neue'; font-weight: bold; font-style: normal; font-size: 16.00pt; font-kerning: none}
span.s2 {font-family: 'Helvetica Neue'; font-weight: normal; font-style: normal; font-size: 16.00pt; font-kerning: none}
span.s3 {font-family: 'Helvetica Neue'; font-weight: normal; font-style: normal; font-size: 16.00pt; text-decoration: underline ; font-kerning: none}
span.s4 {font-family: 'Helvetica Neue'; font-weight: normal; font-style: italic; font-size: 16.00pt; font-kerning: none}
</style>
</head>
<body>
<p class="p1"><span class="s1">html</span><span class="s2"> </span><span class="s3">html</span><span class="s2"> </span><span class="s4">html</span></p>
</body>
</html>
I want to get the html text in UITextView in simple HTML format (without CSS), as the initial text.
Although it is a valid HTML format, I need the HTML text in the simplified format (without CSS) because I can edit this same text in the Android version of the app, and in Android EditText does not accept HTML text with CSS.
Could anyone help me get the HTML text in UITextView without CSS?
Thanks.
In iOS, you could manually remove the style element of the html string with something like the following:
NSString *htmlString = #"Your entire html text as a string";
NSRange firstRange = [htmlString rangeOfString:#"<style type=\"text/css\">"];
NSRange secondRange = [htmlString rangeOfString:#"</style>"];
NSRange range = NSMakeRange(firstRange.location, firstRange.length+secondRange.length);
[htmlString stringByReplacingCharactersInRange:range withString:#""];
You may have to test this code a bit and get it working for you, but this general should work as a simple solution.
I tried to make custom fonts for my application. For that, I wrote this code in my html file:
<style type="text/css" media="screen">
#font-face {
font-family: centurySchoolbook;
src: url(/fonts/arial.ttf);
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
In my Html Body:
<body onload="init();">
<h>Custom Fonts</h>
<div>This is for sample</div>
</body>
But, these styles are not applied to my html body..
Any help to solve this..??
I made it work after doing the following steps:
-Put your CSS in a file, for example my_css.css:
#font-face {
font-family: "customfont";
src: url("./fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
-Reference your CSS file my_css.css in your HTML:
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
Pay attention to the definition of your paths!
For example, let's say you have the following directory structure:
www
your_html.html
css
my_css.css
fonts
arial.ttf
Then, you would have:
#font-face {
font-family: "customfont";
src: url("../fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
and:
<link rel="stylesheet" href="./css/my_css.css" />
Note: if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).
So, you may try to impose your style by using the style attribute.
Eg:
<body>
<h>Custom Fonts</h>
<div style="font-family: 'customfont';">This is for sample</div>
</body>
One drawback is that it seems that the style cannot be applyied on body...
So, if you want to apply the font to the whole page, you may try something like this:
<body>
<!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE -->
<div style="font-family: 'customfont';">
<h>Custom Fonts</h>
<div >This is for sample</div>
</div>
</body>
Hope this will work for you too. Let me know about your results.
Below works like charm for custom font with jQueryMobile and Phonegap:
#font-face {
font-family: "Lato-Reg";
src: url("../resources/Fonts/Lato-Reg.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body *{
margin: 0;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
font-family: "Lato-Lig" !important;
font-weight: normal !important;
}
I also faced the same problem. I put my css file in the css folder. I put the ttf file in just the www folder and it didn't work properly, so I moved my ttf file into the css folder. Here is my code:
#font-face
{
font-family: CustomArial;
src: url('arial.ttf');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-family: CustomArial;
}
If you are using jquery mobile, you have to override the font like:
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
font-family: CustomArial !important;
}
You have to override the font-family in your css for whatever jquery mobile class having font-family:Helvetica, Arial, sans-serif; to
font-family:CustomArial !important;
Now it will work. You can try like this, may be its useful for you.
here your can find the .ttf the google fonts : https://github.com/w0ng/googlefontdirectory
in your .css file
#font-face {
font-family: 'Open Sans';
src: url('../font/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
}
I was facing a similiar issue. The problem was with the path it was taking when the font was given through an external css file.
To resolve this, i declared the font URL inline in the body of index.html
<div>
<style scoped>
#font-face {
font-family: Monotype Corsiva;
src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
}
</style>
</div>
It worked after declaring the font URL in this manner.
<style type="text/css" media="screen">
#font-face {
font-family: 'centurySchoolbook';
src: url('fonts/arial.ttf');
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
with quotes on the font-family and on the url worked for me, inside the html file and on Android.
It works on physical devices, but not on emulator.
The possible issues lies in default index.css in cordova. Check if the body element has style defined for "text-transform:uppercase".
Atleast that was the issue for me, after removing this from body element in default index.css if you are using in your application, may help you as well.
For me I was using gurmukhi/punjabi fonts, and after the above line removal from index.css it just worked like charm with below css definiitions only
Example :
.demo {
font-family: anmol
}
#font-face {
font-family: anmol;
src: url(../fonts/anmol.ttf);
}
I just copied my ttf-fonts into the directory [app-name]/css and declared the font-families in the index.css there. See attached image: my edited index.css (Check the green marked areas in the attached picture). There i also changed the style "background-attachment:fixed;" "Helvetica, Arial, no-serif…" to "Open Sans, Open Sans Condensed, no-serif", – i also deleted the line "text-transform:uppercase". After that everything worked fine with my font "Open Sans".
Of course i also included my own stylesheet with declarations of the other styles and font-families of my project.
I am also using jQuery and jQueryMobile in that project. They use the same font (Open Sans), but i added additional fonts that work as well!
Happy coding!
I'm currently developing an android web browser. There has some pages used other character like Uighur character, and they display unnormally, so I used the following code to resolved this problem.
String htmlStr = getHTML(url, "UTF-8");//get the html content from the url
String tmp="<link href=\"file:///android_asset/myfont.css\" rel=\"stylesheet\" type=\"text/css\" />";
if(htmlStr.contains("</head>")){
htmlStr = htmlStr.replace("</head>", tmp);//add my css into the page
}
mCurrentWebView.loadDataWithBaseURL(url, htmlStr,"text/html", "utf-8", "");//display the page content
This is myfont.css：
#font-face { font-family: MyCustomFont; src: url("fonts/ALPEKRAN.TTF") }
body {font-family: MyCustomFont, Verdana, Arial, sans-serif; text-align:right;}
The ALPEKRAN.TTF font is under the folder of assets/fonts/.
But there have another problem like that page css losed.
Please, give me some suggession.
May you need to specify the full font url, try:
src: url("file:///android_asset/fonts/ALPEKRAN.TTF")
I have been scratching my head for several days over this issue. I am attempting to embed a flash stream from own3d.tv in a HTML page that is view-able in the android web browser. No matter what I do the flash object goes white several seconds after the page loads. I have tried copying their exact code as well as using swfobject but have had no luck. The more confusing part is I am able to view the same stream on their homepage just fine. (own3d.tv). Here are the details:
What I am using:
Android 4.0.1 on Google Galaxy Nexus
swfobject 2.0
Flash 11
Always use a stream id that is online
The Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body { text-align: center; }
html, body { height: 100%, width: 100%; }
</style>
<script>
$(document).ready(function(){
var flashvars = {};
var params = {
allowscriptaccess : "always",
allowfullscreen : "true",
wmode : "transparent"
};
var attributes = {};
swfobject.embedSWF("http://www.own3d.tv/livestream/34046;autoplay=true", "player", "400", "300", "11.0.0","expressInstall.swf", flashvars, params, attributes);
});
</script>
</head>
<body>
<div id="player" style="visibility: hidden;"></div>
</body>
</html>