In order to achieve the WebView display custom font
on rn 0.28:
var html = 'test';
html = `<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style type="text/css">
#font-face {
font-family: "MyFont";
src: url("fonts/fzbys.ttf");
}
body{font-family: "MyFont"; font-size:28px;}
</style>
</head>
<body>`+html+`
</body>
</html>`;
return (
<View style={[{width:this.state.width, alignItems:'center'}, this.props.styles]}>
<WebView
ref={"wv"}
style={{width:this.state.width, height:100}}
source={{html:html, baseUrl:"file:///android_asset/"}}
domStorageEnabled={true}
javaScriptEnabled={true} />
</View>
);
the font file had in android/app/src/main/assets/fonts, then :
run res
Related
I'm making a function using webview in react-native project.
I want to use hello variable to alert when webview is loading,
but I get an error alert
ReferenceError: Can't find variable: hello
I want to use hello variable, I don't want to use "alert("hello")" code;
How do I send hello variable to html??
Here is my code:
import React, { useEffect, useMemo, useState } from 'react';
import { WebView } from 'react-native-webview';
export const WebViewComponent: React.FC<any> = () => {
const hello = 'hello';
const code = `
try {
alert(${hello});
} catch (e) {
alert(e);
}
`;
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>View</h1>
</body>
</html>
`;
return (
<View
style={{
backgroundColor: white,
height: 600,
borderRadius: 20
}}
>
<WebView
javaScriptEnabled={true}
injectedJavaScript={code}
scrollEnabled={true}
bounces={false}
source={{ html }}
/>
</View>
)
}
I want to use injectedJavaScript or injectJavaScript. This code is example.
I solved by changing "${hello}" to ""${hello}"".
I want to set custom fonts in Webview. I have implemented the below code:
#font-face {
font-family: 'Poppins-Bold';
src:url('file:///android_asset/fonts/Poppins-Bold.ttf') format('truetype')
}
body{
font-family: Poppins-Bold
margin: 0;
padding: 0;
color: red;
}
It works fine in android, but it does not working in iOS. Let me know if anybody has a solution for this.
Note: I don't want to use google's CSS font
Set the following font URL based on platform:
const fontUrl = Platform.select({
ios: "Poppins-Bold.ttf",
android: "file:///android_asset/fonts/Poppins-Bold.ttf",
});
Update your CSS styles to the following:
const css = `
#font-face {
font-family: 'Poppins-Bold';
src: local('Poppins-Bold') url('${fontUrl}') format('truetype')
}
body {
font-family: Poppins-Bold
margin: 0;
padding: 0;
color: red;
}`
Note that format('truetype') is used since your font extension is ttf. If you're using an eot font you'll need to use format('opentype').
Once you do that, update your WebView component with the following props:
<WebView
source={{ html, baseUrl: '' }}
originWhitelist={["*"]}
/>
Setting baseUrl to blank will ensure fonts are loaded. Reference this post.
Without setting originWhitelist, you'll get errors on iOS that the URL cannot be found.
This worked for me on both Android & iOS and I happen to be using Poppins as well 😁
I tried the solution outlined by German but this didn't work for me.
The only thing that got it working for me was by base64 encoding the font (you can use the service here), and injecting it that way, which is really annoying but it works across iOS and Android:
const pageHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#font-face {
font-family: 'Canela';
src: url('data:font/woff2;charset=utf-8;base64,${CANELA_BASE_64}') format('woff');
}
h1, h2, h3, html, body { font-family: Canela; }
</style>
</head>
<body>
${props.html}
</body>
</html>
`;
Then you can set up the WebView like this:
const webViewSource = { html: pageHtml, baseUrl: '' };
return (
<WebView
source={webViewSource}
originWhitelist={['*']}
/>
);
I have installed Mathjax.2.7.5 and arabic-Mathjax from https://github.com/OmarIthawi/arabic-mathjax
I use them locally without server, without Internet-connection
i have modified the example "sample-signals.html" to get some arabic equation:
Arabic-Mathjax1
my code is:
!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
| This example shows how to use MathJax's signal mechanism to find out
| about what MathJax is doing, and to hook into various events as they
| occur.
-->
<link href='Amiri' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="D:/4-11-2019/MathJax-2.7.5/arabic/dist/arabic.css">
<script type="text/x-mathjax-config">
// Configure MathJax
//
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js", "D:/4-11-2019/MathJax-2.7.5/arabic/dist/unpacked/arabic.js"],
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
'HTML-CSS': {
undefinedFamily: 'Amiri'
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
},
});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/noUndefined.js",
function () {MathJax.Hub.Startup.signal.Post("*** noUndefined Loaded ***")});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/AMSmath.js",
function () {MathJax.Hub.Startup.signal.Post("*** AMSmath Loaded ***")});
MathJax.Hub.Startup.signal.Post("*** In Startup Configuration code ***");
MathJax.Hub.Register.StartupHook("onLoad",function () {
Message("*** The onLoad handler has run, page is ready to process ***");
});
</script>
<!-- <script type="text/javascript" src="../MathJax.js"></script> -->
<script type="text/javascript" src="D:/4-11-2019/MathJax-2.7.5/MathJax.js"></script>
<style>
.output {
background-color: #F0F0F0;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 3px 1em;
}
</style>
</head>
<body>
<p>
$$\alwaysar{x=1}$$
</p>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<p>\[E = mc^2\]</p>
<p>$$\ar{x=1}$$</p>
<p>$\ar{x=1}$</p>
<p>
Messages about mathematics:
<pre id="MathMessages" class="output">
</pre>
</p>
<p>
All Messages:
<pre id="AllMessages" class="output">
</pre>
</p>
<script>
(function () {
var math = document.getElementById("MathMessages");
var all = document.getElementById("AllMessages");
window.Message = function (message) {
MathJax.HTML.addText(all,message);
MathJax.HTML.addElement(all,"br");
};
MathJax.Hub.Register.MessageHook("New Math",function (message) {
var script = MathJax.Hub.getJaxFor(message[1]).SourceElement();
MathJax.HTML.addText(math,message.join(" ")+": '"+script.text+"'");
MathJax.HTML.addElement(math,"br");
});
MathJax.Hub.Startup.signal.Interest(function (message) {Message("Startup: "+message)});
MathJax.Hub.signal.Interest(function (message) {Message("Hub: "+message)});
Message("##### events above this have already occurred #####");
})();
</script>
</body>
</html>
Can anyone help me????
I am trying to load HTML content to WKWebView, It does not load properly the same as screen height/width, same code is working fine with UIWebView, See the following code
webView.loadHTMLString(htmlString!, baseURL: nil)
HTML string content <style type="text/css"> #container { width: 667px; height: 375px; margin: 0 auto } </style> 667px is screen height and 375px is screen width.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
#container {
width: 667px;
height: 375px;
margin: 0 auto
}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', {
//Chart code.
});
</script>
</body>
</html>
What can I do to solve this issue?
Add headerString before your html code and try it Like below
let description = "<p> HTML content <p>"
var headerString = "<header><meta name='viewport' content='width=device-width,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
headerString.append(description)
self.webView.loadHTMLString("\(headerString)", baseURL: nil)
I have a problem that the text inside the content-div is scrollable. Happens on iOS 6 with iPhone 4 and only if native title is set.
Video: http://www.youtube.com/watch?v=8ARaDQzBqOM
Demo:
<!DOCTYPE html>
<html>
<head>
<script>
forge.topbar.setTitle('Test App', function() {
forge.logging.log("Topbar image set");
}, function(e) {
forge.logging.log("Topbar image error: " + e);
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>this text is scrollable</p>
</div>
</div>
</body>
</html>
You might want to try to reset all the margins, paddings and border for all elements using CSS. Add this right before the closing </head>:
<style type="text/css">
* { /* reset */
margin: 0;
padding: 0;
border: 0;
}
</style>