webViewOfferes = FindViewById<WebView>(Resource.Id.webViewOffers);string start = "<html><head><meta http-equiv='Content-Type' content='text/html' charset='UTF-8' /><style type='text/css'> li {line-height: 2;} #font-face {font-family: 'PlayfairDisplay-Regular';src: url('file:///Assets/fonts/PlayfairDisplay-Regular.ttf');} body{font-family:PlayfairDisplay-Regular;}</style></head><body>";
string end = "</body></html>";
webViewOfferes.LoadData(start + "<h3>My Custome Font:</h3>"+ end, "text/html", UTF32Encoding.ASCII.ToString());
WebSettings Offersetting = webViewOfferes.Settings;
Offersetting.DefaultFontSize = 13;
Not getting desired output with this code someone please help
Change
file:///Assets/fonts/PlayfairDisplay-Regular.ttf
to
file:///android_asset/fonts/PlayfairDisplay-Regular.ttf
This works for both Android and iOS.
After searching for a while I found the solution. Basically it's directly the same as you would write in HTML. So I created this HTML code in a HTML file, layed the font myfont.otf in the same folder and made this work:
<html>
<head>
<style type=text/css>
#font-face {
font-family: 'CustomFont';
src: url('myfont.otf')
}
body {
font-family: 'CustomFont';
}
</style>
</head>
<body>
<p>This is some sentence with a custom font.</p>
</body>
</html>
Now everything you have to do is:
Android:
Put the font into the Android Assets folder
Ensure its build action is AndroidAsset
Pass the HTML string and the fontname (with path if in subfolder, like Fonts/myfont.otf) to the WebView
iOS:
Put the font into the iOS Resources folder
Ensure its build action is BundleResource
Pass the HTML string and the fontname (with path if in subfolder, like Fonts/myfont.otf) to the WebView
I made a helper class for this:
public static class HtmlHelper
{
public static string SurroundWithCustomFont(string htmlString, string fontPath)
{
return $#"
<html>
<head>
<style type=text/css>
#font-face {{
font-family: 'CustomFont';
src: url('{fontPath}')
}}
body {{
font-family: 'CustomFont';
}}
</style>
</head>
<body>
{htmlString}
</body>
</html>";
}
}
Related
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={['*']}
/>
);
In my mvc net core app I need to implement drag&drop files uploader. I found Dropzone js and hoping to use it in my purposes. But can't configure it, I need to allow it upload ony zip files.
My code:
<div class="row">
<div class="col-md-9">
<div id="dropzone">
<form action="/Home/Upload" class="dropzone needsclick dz-clickable" id="uploader">
<div class="dz-message needsclick">
Drop files here or click to upload.<br>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
Dropzone.options.uploader = {
paramName: "file",
maxFilesize: 256,
acceptedFiles: "application/zip,application/octet-stream,application/x-zip-compressed,multipart/x-zip,.zip",
maxFiles: 1
};
});
</script>
Also of course I have controller:
[HttpPost]
public async Task<IActionResult> Upload(IFormFile file)
{
var uploads = Path.Combine(_environment.ContentRootPath, "Uploads");
if (file.Length > 0)
{
using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
return RedirectToAction("Index");
}
But still, application allows to upload any file with any MIME type. Where is a problem?
Also restriction of maxFiles isn't working too - it allows me to upload infinite count of files.
You can use option of dropzone.js name acceptedfile.
Dropzone.options.myAwesomeDropzone = {
....
acceptedFiles: ".zip",
....
};
According to the documentation (https://www.dropzonejs.com/#configuration), you can do it like this:
Dropzone.options.myAwesomeDropzone = {
accept: function(file, done) {
if (file.name.endsWith !== ".zip") {
done("Naha, you don't.");
}
else { done(); }
}
};
A function that gets a file and a done function as parameters. If the
done function is invoked without arguments, the file is "accepted" and
will be processed. If you pass an error message, the file is rejected,
and the error message will be displayed. This function will not be
called if the file is too big or doesn't match the mime types.
Edit:
Here is a fiddle to demonstrate it: http://jsfiddle.net/behyzjng/15/
Set acceptedFiles: 'application/zip' in defaultOptions
Here are the documentation for you to work on Dropzone.js:
Github: https://github.com/dropzone/dropzone
Docs: https://docs.dropzone.dev
check all avaliable options at https://github.com/dropzone/dropzone/blob/main/src/options.js
check the desired extensions allowed and write the MIME type as a value of acceptedFiles at https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Working solution here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<title>Document</title>
</head>
<body>
<style>
.my-dropzone {
width: 100%;
height: 100px;
border: 1px dashed;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="my-dropzone">
Drag and drop zip files here, or click here to upload.
</div>
<script>
// Dropzone.js
// Github: https://github.com/dropzone/dropzone
// Docs: https://docs.dropzone.dev
// check all avaliable options at
// https://github.com/dropzone/dropzone/blob/main/src/options.js
const defaultOptions = {
url: "/file/post",
// check the desired extensions allowed and write the MIME type as a value of acceptedFiles at
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
acceptedFiles: 'application/zip'
};
// Dropzone has been added as a global variable.
const dropzone = new Dropzone("div.my-dropzone", defaultOptions);
</script>
</body>
</html>
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
I'm trying to style distributed nodes in Dart Polymer with no luck. I'm using the example at:
http://www.polymer-project.org/articles/styling-elements.html#style-distributed
as a starting point. However, I can't even get that working once ported to Dart. Here is my code:
<polymer-element name="test-element">
<template>
<style>
content[select="p"]::content * { /* anything distributed here */
font-weight: bold;
}
/* #polyfill p:first-child */
::content p:first-child {
color: red;
}
/* #polyfill footer > p */
::content footer > p {
color: green;
}
/* #polyfill :host > p */
::content > p { /* scope relative selector */
color: blue;
}
</style>
<content select="p"></content>
<content></content>
</template>
<script type="application/dart" src="testelement.dart"></script>
</polymer-element>
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="testpolymer.css">
<!-- import the test-element -->
<link rel="import" href="testelement.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>TestPolymer</h1>
<p>Hello world from Dart!</p>
<test-element>
<p>I'm red and bold</p>
<p>I'm blue and bold</p>
<footer>
<p>I'm also red</p>
<p>I'm green</p>
<span>I'm black</span>
</footer>
</test-element>
</body>
</html>
The output has no styling applied and is just black text for everything. Any ideas what I'm doing wrong?
polymer-elements polymer-flex-layout / polymer-flex-layout.css still use
::-webkit-distributed(p) {
color: red;
}
which also works in my recent version of Dartium.
I have no idea when the new selectors take effect.
Other polymer-elements that make use of this selector but have recently switched to ::content
polymer-ui-field
polymer-ui-menu-item
polymer-ui-nav-arrow
polymer-ui-pages
polymer-ui-sidebar
polymer-ui-toolbar
You can browse the history to find the previous webkit-distributed selector examples.
I guess they use Chromium which may be a little ahead of Dartium.
When reloading the page, sometimes <li>Dagbladet</li> is rendered with a linebreak before "t", so it looks like:
Dagblade
t
<li>DN</li> is always rendered as:
D
N
IĀ“d like to list each list element to the right for the previous one.
ItĀ“s positioned as it should when I donĀ“t activate sIFR3.
All tips on how to use sIFR3 with to achieve this is highly appreciated!
The list should look like this:
Aftenposten Dagbladet Verdens Gang DN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>type-test</title>
<link rel="stylesheet" href="sifr/sifr.css" type="text/css">
<script src="sifr/sifr.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var cochin = { src: '/sifr3-r436/demo/cochin.swf'}
sIFR.activate(cochin);
sIFR.replace(cochin, {
selector: 'h1, h2, h3, h4, li',
css: '.sIFR-root { }'
});
</script>
<style type="text/css" media="screen">
ul li {
list-style: none ;
display: inline ;
}
</style>
</head>
<body>
<p>
<ul>
<li>Aftenposten</li>
<li>Dagbladet</li>
<li>Verdens Gang</li>
<li>DN</li>
<ul>
</p>
</body>
</html>
sIFR uses the width of the original element to fit the Flash text into. In your case, the Flash text is wider than the original element, doesn't fit and instead breaks into a new line.
The solution is to add some letter-spacing (through a .sIFR-active selector) to make the HTML text wider just for sIFR. Then when the replacement happens there'll be enough space to fit the Flash text.
use like this
sIFR.replace(test, {
selector: 'h1',
css: '.sIFR-root { color: #cccccc; width: 100%; text-align: left; letter-spacing:1;}',
wmode: 'transparent',
forceSingleLine: true;
});
forceSingleLine: true; will solve your problem.
I really think you need to be posting this on the SIFR Support Forums. This isn't a programming issue.