If I remove the border-radius property, Chrome displays the whole background in gray. When I add border-radius, the page background turns white. This is only Chrome/webkit specific. The page works fine with gray background everywhere in Firefox/Opera/IE. Any ideas why?
http://devio.us/~hara/test.html
Interesting problem. #Zlatev is definitely right, you should probably your styles to a <div> within the <html> and <body> tags.
I tried playing around with it, and I found that if you put the background on the <body> tag it still overflows to fill the entire page, however if you specify the background for the <body> tag and then declare the <html> tag to have a different background (say, white), it look like you were hoping it would.
<!doctype html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="faviconNoFap.ico" />
<style type="text/css">
html {
background: white;
}
body {
width: 760px;
margin: 55px auto 0 auto;
border: solid 1px;
font-family: Hoefler;
background: #e4e4e4;
}
h2 {
margin-top: 0.5em;
border-bottom: dotted 1px;
font-family: Helvetica, sans-serif;
}
</style>
<title>Test title of a test web-page</title>
</head>
<body>
<h2>Heading Heading Heading Heading</h2>
<p>Text text text text text text text text text.</p>
<p>Text text text text text text text text text.</p>
<p>Text text text text text text text text text.</p>
<p>Text text text text text text text text text.</p>
<h2>Heading Heading Heading Heading</h2>
<p>Text text text text text text text text text.</p>
<p>Text text text text text text text text text.</p>
<p>Text text text text text text text text text.</p>
<p>Text text text text text text text text text.</p>
</body>
</html>
Related
I want to use 2 fonts at the same time for English and Arabic characters. Haven't been able to figure out how to do it :(
These are the fonts I'm trying to use.
Arabic: https://fonts.google.com/specimen/Almarai?query=almarai
English: https://fonts.google.com/specimen/Raleway?query=raleway
On web, it would be as simple as font-family: Raleway, Almarai, sans-serif, Arial;
If anyone knows how to do it, I would really appreciate the help!!
#import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Almarai&family=Raleway&display=swap');
body {
font-family: 'Almarai', sans-serif;
}
h2 {
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World! is in this font style and I am too!</h1>
<br>
<h2>I am styled as RALEWAY</h2>
</body>
</html>
Explanation: Google fonts provide rules to specify in CSS to import it as you do it also specifies how you use the font in this example I've demonstrated how. you use the import("font link here") to import the fonts or you could link them in the head. then you use the font-family: 'font name here' with an element {} to specify that the font is active. Then that element should be in that font.
When rendering math containing only letters and other symbols without ascenders (e.g. "x") inside a <td> tag, the text does not align on the baseline (tested with Chrome 56 and Firefox 52 on Windows 1.
Example:
<html>
<head>
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<style>
td {border:1pt solid gray;}
table {border-collapse: collapse;}
</style>
</head>
<body>
<table><tr>
<td>reference</td>
<td>\(x\)</td>
<td>\(x\)x</td>
<td>\(xx\)</td>
<td>\(\cdot\)</td>
<td>\(\cdot t\)</td>
<td>\(=\)</td>
<td>\(=t\)</td>
</tr></table>
</body>
<html>
Is there an easy way to correct this?
You will get better results if you use
td {
border:1pt solid gray;
vertical-align: baseline;
}
since the default vertical alignment for table cells is middle, and the mathematics produced by MathJax have tight bounding boxes, so center vertically based on those heights.
I've been trying hard, but I can't find the reason. Check www.kanionek.pl
How to get rid off the gap between the header and top of the window? There's .site: 15px auto, but even if I reduce it to 0 there's still 21px extra. Hope you can help.
I know I can use negative margin, but I would like to know the reason. Part of header:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'dream' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
Part of template:
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
css fragments:
.site{
max-width: 960px;
margin: 15px auto;
border: 2px solid #808080;
border-radius: 10px;
overflow: hidden;}
Header margin and padding set to 0 do not help.
Body padding and margin are set to 0 and the only trace is that when I change css body section line-height to "0" that gap is gone.
Something is adding a zero width no-break space right after the <body> tag, forcing the following block-display <div> down one line. Probably one of the many scripts. I couldn't tell what, but there you go.
To see it, open the Firefox inspector, right-click on the <body> tag, and click "Edit as HTML". Right after the tag there is (at least in my Firefox) a red dot which is the placeholder for that invisible character. You can copy it and paste it into something that will tell you the codepoint etc.
I solved the problem - maybe it will help someone some day. I could not locate exactly zero-width char, but being almost sure it should be in header.php, I opened it notepad++ and saved using utf-8 without BOM encoding.
I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.
Here is my (basic) HTML which renders fine in the browser:
<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>">
<div style="<?php echo $styles['inner-container']; ?>">
<div style="<?php echo $styles['fullname']; ?>">
<?php echo $data['fullname']; ?>
</div>
<div style="<?php echo $styles['fullcouncil']; ?>">
<?php echo $data['fullcouncil']; ?>
</div>
<div style="<?php echo $styles['session_date']; ?>">
<?php echo $data['session_date']; ?>
</div>
</div>
</div>
Here is my DOMPDF render logic:
$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf';
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/';
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($report);
$dompdf->set_paper('letter', 'landscape');
$dompdf->render();
$dompdf->stream($filename, array("Attachment" => false));
exit(0);
I tried with A4 paper as well, same result.
I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).
I have not tried outputing as actual file before rendering in browser for download, but I will.
This is what the result looks like...
Any suggestions appreciated. Thanks.
====================================
UPDATE Per Request from BrianS
Thanks for your attention. Here is a dump of the rendered HTML:
<html>
<head></head>
<body>
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;">
<div style="height:672px; width: 906px; border: thin solid #666666;">
<div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div>
<div style="margin-bottom:125px;">Council of Councils</div>
<div style="font-weight:bold;">April 16 - 19, 2015</div>
</div>
</div>
<style>
#font-face {
font-family: TimesBold;
src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf');
}
</style>
<style>
}
#page {
margin: 0;
}
html {
margin: 72px 76px;
}
body {
width: 1056px;
margin:0;
}
.hint {
background: none repeat scroll 0 0 #6AEA91;
font-size: 13px;
padding: 50px 10px;
text-align: center;
width: 250px;
position: absolute;
}
#media print {
.hint {
display:none;
}
}
</style>
</body>
</html>
I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.
Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.
In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).
In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.
As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.
Before I continue some notes:
You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
dompdf does not yet support box-sizing (otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).
I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for dompdf.
<html>
<head>
<style>
#page {
size: a4 landscape;
margin: 72px 76px;
}
body {
font-family: Times New Roman;
font-size: 33px;
text-align: center;
border: thin solid #666666;
}
.certificate-name {
font-size: 45px;
font-weight: bold;
margin-top: 96px;
margin-bottom:10px;
}
.certificate-title {
margin-bottom: 125px;
}
.certificate-date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="certificates-layout-1">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
<div id="certificates-layout-2">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
</body>
</html>
When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.
I generate pdf from xhtml file but font style is differs with XMHTL.
Here is Java Code
ITextRenderer renderer = new ITextRenderer();
renderer.getFontResolver().addFont("C:/Windows/Fonts/times.TTF", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
renderer.setDocument(urlXhtmlFile);
renderer.layout();
renderer.createPDF(os);
os.close();
How to set font style of pdf and html is same (color). Thanks!!!
You should add CSS into your XHTML, there you can manipulate with font size, color etc (change font properties according to your needs):
<html>
<head>
<style type="text/css" media="print">
body {
font-family: "Times New Roman", Times;
font-size: 10pt;
color: blue;
}
</style>
</head>
<body>
</body>
</html>
Also, I suggest you embed font into PDF, as someone opening this PDF without this font installed would not see PDF properly.