I am using TCPDF's writeHtml function for a page that renders properly in the browser.
In the output PDF, the fonts are too small. I've tried with setFont, but it doesn't seem to have an effect. Does anyone have experience with this?
I'd like to add here that the HTML is not always in my control, so I would prefer to do this with TCPDF options(and not by modifying the source html)
UPDATE: I am able to change the font size by setting it on the body. The only remaining problem is that, to render correctly in the browser, it needs to be 12px. To render correctly in the PDF, it needs be something like 30px. Do I set the media on the css? What is the media type for TCPDF?
Are you using tags? tcpdf's HTML engine gives the tag precedence over any CSS, or other size-adjusting tags. If you remove any extraneous tags from the HTML and use straight CSS, things should render as expected. Or, if you aren't using CSS, you should. Just because a browser displays it correctly doesn't mean it will look the same on other formats. The browser has likely performed some magic of its own to fill in the gaps in your CSS specifications.
UPDATE
Here's an example of specifying CSS declarations with your HTML when using tcpdf. Note how all the styling is applied using the CSS declarations inside the <style> tag outside the actualy HTML body.
<?php
$html = <<<EOF
<!-- EXAMPLE OF CSS STYLE -->
<style>
h1 {
color: navy;
font-family: times;
font-size: 24pt;
text-decoration: underline;
}
p {
color: red;
font-family: helvetica;
font-size: 12pt;
}
</style>
<body>
<h1>Example of <i>HTML + CSS</i></h1>
<p>Example of 12pt styled paragraph.</p>
</body>
EOF;
$pdf->writeHTML($html, true, false, true, false, '');
?>
The best solution that worked for me was to replace 'px' to 'pt' in html code:
$tidy = str_replace ('px', 'pt', $tidy);
Before on the left side and after replacing on the right:
TCPDF recognizes basic CSS such as font-size, font-color, and font-family.
For a little more information, check out TCPDF not render all CSS properties
Related
This is my php file, index.php
<html>
<div id='hello'>Hello, <?php $name?>! How are you?</div>
</html>
This is my css file, index.css
<style>
#hello {
font-size: 36px;
color: red;
border: 1px solid red;
}
</style>
I am trying to use the library https://github.com/tijsverkoyen/CssToInlineStyles to convert my index.php file to inline css. The problem is, it converts the closing php tag '?>' to '?>' for the closing tag. I know the library is targeting HTML and my file is a .php, but are there a way to stop the '>' tag from being converted to it's respective symbol '>'? If so, how?
The index.css should contain only:
#hello {
font-size: 36px;
color: red;
border: 1px solid red;
}
The <style> is a HTML tag and it should not come in a .css file. If you have them inside your .css file, the whole file will not work.
For the what you posted, the short answer is no. At least not without tweaking the library (as you pointed out, it is intended for HTML files).
If you really (really) need to do the "conversion" dynamically (as in "each time the page is requested") you can do that on the client side by manipulating the DOM with some JavaScript. (see here).
If you need the conversion to be done only once and then leave the output file as a server resource you could use template pre-processing.
I'm not sure of why you want to convert to inline css, perhaps if you explain a bit more we could point you in the right direction.
G00d 1uck.
[UPDATE] So the conversion should be dynamic. A way to go is (instead of using a PHP file that contains HTML code with embedded echoed PHP values) to put all html + PHP 'echoed' into a string variable and then inject the result as a stream (or as an actual temp file) to the converter, wait for the output and send it by email.
No, it is (as it should) escaping those characters for you. Your css files should never contain html.
Remove the <style></style> tags and it should work. You only need those if you're putting css into your html.
My web page is having a top margin.
I cannot get rid of it. I tried
html {
margin:0px;
}
body {
margin:0px;
}
Try to Call Suitable reset css
Reset CSS
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible.
hi lot of css elements have default margin and padding , always use reset css
add following code in your css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
or refer below link
http://www.javascriptkit.com/howto/nomargin.shtml
I have wordpress sidebar with:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?
Or I must manually add image into code? like:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
If your image is 10px wide, you could try this:
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
Keep your h3 tag without including img tag, and do the following:
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
Yes, you can do it in CSS.
Simply use the :before pseudo-selector, like this:
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... } for it to apply to all h3 elements.
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
Why not simply apply the image as a background?
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
So, at first, I thought a <span> thing would work.
Then, I tried this, and it worked seamlessly:
h3:before{
content: url('your url');
}
You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):
- Use Glyphicons of Bootstrap
If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.
Bootstrap contains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok” so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
- Use icons of existing Cheatsheet of the currently used Font or third party
If your website don’t use Bootstrap or the current set of icons of Bootstrap doesn’t meet your need (despite containing a lot) (Glyphicons of bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design… are some of the fonts that have icons Cheatsheet which are for immediate use.
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set of cons, you need to add this code to the head section in your website:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-edit"></i>
– If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet
Please have look at this page & its source code.
http://www.chemfluence.org.in/monetarist/index_copy.php
Web page is not showing from top of the web page. There is a gap of around 10px from top of the browser.
I have higlighted the gap in above image.
Could you please anyone tell me how to display the page from top 0px ?
Chrome has a default margin of 8px built into the browser, in your CSS use:
body{ margin: 0 }
It's always handy to use some sort of CSS reset, to prevent inconsistencies like the above between browsers.
Something like this: http://meyerweb.com/eric/tools/css/reset/
This is because you haven't explicitly set a margin for the body of your document and some browsers then use a default one.
To fix that, add something like this to your CSS stylesheet:
body {
margin-top: 0px;
}
The default browser style sheets add a margin to the body Tag, so you have to set the margin of the body to 0:
html,body {margin:0;}
By the way, you should not use a table as a layout grid.
I'm working with Embarcadero's RADPHP XE2 and a page I want to build has some text at the top (multiple lines) as a label, and below that a PageControl component - despite the page being set to be more than tall enough, when debugging and viewing in Internet Explorer there are no scrollbars and it chops the bottom of the page off.
Has anyone found a work around on this?
I could not get scroll bars in my browser although the page is larger than the window.
Now fixed by adding this
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
to my css file.
To load my css file into the Page I put my tags into a text file including
<link rel="stylesheet" href="/css/mainstyle.css" type="text/css">
then load the text file into the page my putting
$head = file_get_contents('defaulthead.txt');
echo $head;
into the OnShowHead event of the page.
The solution by Les Kaye did not work for me.
For some reason, the script /rpcl-bin/qooxdoo/framework/script/qx.js does overwrite my stylesheet by inserting following CSS at runtime:
html,body {
width:100%;
height:100%;
overflow:hidden;
}
So what I simply did is using the !important rule. It is not clean, but the behavior of qx.js is not clean either. There should really be a Form property where the user can define if the page scrolls or not.
/* Overwrite the values which are enforced in /rpcl-bin/qooxdoo/framework/script/qx.js */
html {overflow-x:scroll !important ; }
html {overflow-y:scroll !important ; }
html {overflow:scroll !important ; }