I have devanagari script in my html file. But it is displayed as ?????? in the .pdf file. how to solve this problem?
This is the html code
<style>
#font-face {
src: url("/Shivaji01.ttf");
font-family: "Shivaji01";
}
</style>
<p style="text-align:center;font-family:Shivaji01"> फोंडा - गोवा 403401 </p>
and i am getting this error: Undefined index:in \vendor\dompdf\dompdf\lib\Cpdf.php
Are you using the utf8? Which font did you choose? Make sure that the font contains the characters and the document is in the correct encoding.
I hope this helps: dompdf character encoding UTF-8
step 1) add your font's ttf(TrueType font),afm(Adobe Font Metrics) and ufm types in your vendor/dompdf/lib/fonts file.
step2) edit your "dompdf_font_family_cache.dist.php" file. add
'yourFontName' =>
array(
'bold' => $distFontDir . 'yourFontName',
'bold_italic' => $distFontDir . 'yourFontName',
'italic' => $distFontDir . 'yourFontName',
'normal' => $distFontDir . 'yourFontName',
),
step 3) in your css, add
#font-face {
src: url("/PathToyourFont.ttf");
font-family: "yourFontName";
}
step 4) in your css, you can use your font inside font-family
body {
margin-right: 1cm;
margin-left: 1cm;
font-family: "yourFontNamr",Helvetica,Arial,sans-serif;
}
Related
I've using mpdf to show photo user in pdf. I've tried to insert new font Poppins to mpdf. I have tried using import from google fonts like #import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');, then I want to change font weight, but the result is same.
Here's the code
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
</style>
</head>
<body style="background-image: url('<?= base_url(); ?>assets/image.png');width:50%;height:10%;background-size:no-repeat;background-size:cover;text-align:center;">
<h2 style="margin-top:550px;width:76%;text-align:center;position:absolute;z-index:200;font-family: 'Poppins', sans-serif;font-weight: 900;"><?= "name"; ?></h2>
</body>
</html>
Do you know how to change font weight or add font family correctly ?
as by mpdf documentation you need to set this up in your controller, here is the snippet I used for RockSalt and PT Caption fonts. Make sure to place the *.ttf files into the corresponding folder, in my case: /assets/_pdf/_fonts
$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];
$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
$_SERVER['DOCUMENT_ROOT'] . '/assets/_pdf/_fonts',
]),
'fontdata' => $fontData + [
'rocksalt' => [
'R' => 'rocksalt.ttf',
],
'ptsanscaption' => [
'R' => 'ptsanscaption.ttf',
]
],
'default_font' => 'ptsanscaption'
]);
$html=$this->load->view('my_mpdf','',true);
$mpdf->WriteHTML($html);
note: in my view file my_pdf (where I build the html I want to output) in order to see a "pre-view" in the browser (I'm using the same view file for building the pdf and for the preview), I'm applying the fonts using
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=PT+Sans+Caption" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rock+Salt" />
and css as usual
.title{
font-family: 'Rock Salt', rocksalt;
}
edit: In order to change your font-weights, you follow the same rules. Just copy Poppins-Regular.ttf and Poppins-Bold.ttf (or any other) to you font's folder and add the font variant you wish to the fonts array:
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
$_SERVER['DOCUMENT_ROOT'] . '/assets/_pdf/_fonts',
]),
'fontdata' => $fontData + [
'rocksalt' => [
'R' => 'rocksalt.ttf',
],
'ptsanscaption' => [
'R' => 'ptsanscaption.ttf',
],
'poppins' => [
'B' => 'Poppins-Bold.ttf',
],
'poppins' => [
'R' => 'Poppins-Regular.ttf',
]
],
'default_font' => 'ptsanscaption'
]);
then create a css rule:
.my_style{
font-family: 'Poppins';
color:red;
font-size: 16px;
}
and apply it in the html:
<div class="my_style">
<b>bold text</b>
regular text
</div>
I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.
Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.
<v-data-table class="elevation-1 primary"></v-data-table>
Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>
elevation-1 is their standard class name. I added test to illustrate the point.
Add necessary styling to .test .theme--light.v-table selector in your custom CSS.
E.g. .test .theme--light.v-table { background-color: #00f; }
You may need to replace the theme name in the CSS path with your theme name.
If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.
A simple way to include your CSS is with <style> tag inside your App.vue file:
<style>
#import './assets/styles/yourstyles.css';
</style>
How to include css files in Vue 2 has more on that.
You can use headers object to specify class as below,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
divider: true,
sortable: false,
value: 'name',
class: "blue lighten-5"
},
{
text: 'Calories',
value: 'calories',
align: 'center',
divider: true,
class: "blue lighten-5"
}]
The above code will add light blue background to your header. You can do more with the class attr in headers object
The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.
# 1. Add a class to the table element
<v-simple-table class="table">
...
</v-simple-table>
# 2. Add background color
<style scoped>
.table {
background-color: red;
}
</style>
I'm testing the WPEWebkit with arabic website and I have an issue with some website and I don't know what's wrong.
This one won't render the font (rectangles) : https://www3.nhk.or.jp/nhkworld/ar/news/
this jsfiddle neither : https://jsfiddle.net/samoud/qa3cfjdf/6/
or this one (with google fonts) : https://jsfiddle.net/samoud/qa3cfjdf/7/
CSS
#import url('https://fonts.googleapis.com/css?family=Amiri');
.arabic {
font-family: 'Amiri', serif;
}
HTML
<div class="arabic">
قصة رجل يعثر على والديه بعد رحلة بحث دامت 74 عاما
</div>
BUT this one will render as expected : http://www.aljazeera.net/portal
Do you have any idea please ?
Is it possible to set a margin around fields.
For example in image :
If I want to set lower (separated) checkBox in line with above once, is there a way to do it?
Marko
Start by inspecting the HTML code (with Chrome).
The code corresponding to the Checkbox Field is something like that:
<div class="form-field check-box-field"
data-modelclass="org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm$MainBox$ConfigurationBox$CheckboxField"
data-classid="CheckboxField_org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm"
id="scout.CheckBoxField[1-49]"
style="left: 0px; top: 14px; width: 1598px; height: 30px;"
>
<div class="field has-inner-alignment halign-left valign-top" style=
"left: 148px; top: 0px; width: 1420px; height: 30px;">
<div class="check-box" tabindex="0"></div>
<div class="label">
Checkbox
</div>
</div>
</div>
With CSS you can do anything possible:
.check-box-field {
background-color: red;
}
Now because you do not want to add some custom CSS style for all CheckBox Fields, you can define a custom Css-Class in your CheckBox:
#Order(4)
public class UnknownCheckBox extends AbstractBooleanField {
#Override
protected String getConfiguredCssClass() {
return "checkbox-under-listbox";
}
// ... Some Code ...
}
And now you add this CSS code:
.checkbox-under-listbox {
margin-left: 20px;
}
I have realized this example with the Widgets Demo Application (org.eclipse.scout.docs repository, releases/5.2.x branch). I added my css code in this file: org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css (It is probably not the best approach to have everything in main.css).
You can deduce from this example how you can add an additional CSS/LESS module and macro to your application. This post: Inclusion of additional icons from font-awesome might also be usefull. You will have a main.css instead of a font.css.
WARNING: this is not state of the art.
At the end this is normal HTML development (single page application of course), so you can do what you want...
If you do not want to use the LESS compiler and the File preprocessor, you can simpelly add a normal CSS file in the folder:
<your_project>.ui.html/src/main/resources/WebContent
Let say:
<your_project>.ui.html/src/main/resources/WebContent/my_custom.css
Do not forget to include your CSS File between the <head> and </head> tags in the HTML index file:
<your_project>.ui.html/src/main/resources/WebContent/index.html
Something like:
<head>
<!-- some code -->
<link rel="stylesheet" type="text/css" href="my_custom.css">
<scout:stylesheet src="res/scout-module.css" />
<!-- some code -->
</head>
You can always use custom CSS: Let your field implement IStyleable and use setCssClass() to apply an appropriate CSS class. I'd try to avoid using such pixel pushing approaches as much as possible.
I want to change the tags
<strong> to <font style = "font-weight: bold;">
and change the tags
<em> to <font style = "font-style: italic;">
I've tried it as described in http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.coreStyles_bold
but there is absolutely no change.
Last I turn it into:
CKEDITOR.config.coreStyles_bold = { element: 'strong', styles: { font-weight: 'bold' }, overrides: 'b' };
expect the result to be:
<strong style="font-weight: bold;"></strong>
version of CKEditor, 4.1.1
If you really want this, this might do the trick:
config.allowedContent = true;
config.coreStyles_bold = {
element: 'font',
attributes: { 'style': 'font-weight: bold;' },
overrides: 'strong'
};
Set these in the config.js file - not inline. BTW, you are using the wrong documentation, see: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-coreStyles_bold