Document padding issues in mpdf - css

Note: mpdf 6.0
Hello,
I am trying to generate pdf's using mpdf that require precise positioning of elements for later printing purposes. The elements are to be drawn starting from the very top left corner of a given page, i.e. there should be no implicit paddings, margins, or other things that might affect the position of elements in the body.
Problem: mpdf appears to ignore CSS and values passed in constructor concerning margins/padding for the document root. The body is surrounded by margins in the PDF document (or the body is padding the child element). The stylesheet is indeed used by mpdf, though.
Observation: the same HTML that is fed to mpdf along with the same stylesheet produces seemingly correct results in a browser (viewing the HTML).
$mpdf = new Mpdf([
//'debug' => true,
'format' => 'A4',
'margin_left' => 0,
'margin_right' => 0,
'margin_top' => 0,
'margin_bottom' => 0,
'margin_header' => 0,
'margin_footer' => 0
]);
...
I've set paddings and margins to 0 wherever I could, especially:
body {
margin: 0mm;
padding: 0mm;
}
I don't know where I'm going wrong. Do you have suggestions as to how I might solve this problem?

I was also facing the similar problem with mPDF version 7, then I added a code in my css file -
#page {
margin-top: 0px;
margin-left:0px;
}
Write this as it is in your css file. It solved the problem for me.

As from the Mpdf docs for the constuctor function:
In V7.0 - "Parameters replaced with single $config parameter array"
You are using V6.0 try using comma separated values.
new \mPDF(x,x,x,x,x,x,etc)

This works for me. (10 = 10mm)
$mpdf = new \Mpdf\Mpdf([
'tempDir' => APP_PATH . '/tmp/xyz',
'mode' => 'utf-8',
'format' => 'A4',
'margin_left' => 10,
'margin_right' => 10,
'margin_top' => 10,
'margin_bottom' => 10,
'margin_header' => 10,
'margin_footer' => 10]);

Related

Use HTMLPurifier to append a class name to CSS styles written in CKEditor

In CKEditor, I'm writing custom CSS like:
a {
color: #ff0000;
}
but I don't want it to overwrite my css written for other global components of my project. Is there a way to use HTMLPurifier to add a class to all my css written in CKEditor. Something like:
.my-ckeditor-class a {
color: #ff0000;
}
In my purifier.php file I have this rule set up but I'm not sure how to go about prefixing a class to all CSS written in my CKEditor
'ckeditor' => [
'HTML.Allowed' => 'b,i,u,a[href|title|target|style],ul,li,br,ol,p,em,strong,img[alt|src|style|width|height],table,td,th,tr,iframe[src|width|height|frameborder]',
'Attr.AllowedFrameTargets' => [ '_blank', '_top', '_self', '_parent' ],
'CSS.Trusted' => true,
'CSS.AllowedProperties' => 'display,font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,padding-right,padding-top,padding-bottom,padding,margin,margin-left,margin-right,margin-top,margin-bottom,color,background-color,text-align,vertical-align,background-image,background-position,max-width,width,height,max-height',
'HTML.MaxImgLength' => NULL,
'CSS.MaxImgLength' => NULL,
'CSS.AllowTricky' => true,
'CSS.AllowImportant' => true,
"HTML.SafeIframe" => 'true',
"URI.SafeIframeRegexp" => "%^(.*)%",
'CSS.[something-to-prefix-class]' => [
'class' => '.my-ckeditor-class',
]
],
```
I believe you're looking for Filter.ExtractStyleBlocks.Scope:
If you would like users to be able to define external stylesheets, but
only allow them to specify CSS declarations for a specific node and
prevent them from fiddling with other elements, use this directive. It
accepts any valid CSS selector, and will prepend this to any CSS
declaration extracted from the document. For example, if this
directive is set to #user-content and a user uses the selector
a:hover, the final selector will be #user-content a:hover.
The comma shorthand may be used; consider the above example, with
#user-content, #user-content2, the final selector will be #user-content a:hover, #user-content2 a:hover.
But keep this warning in mind (although I don't know if this is still relevant, this is a pretty old warning at this point):
Warning: It is possible for users to bypass this measure using a
naughty + selector. This is a bug in CSS Tidy 1.3, not HTML Purifier,
and I am working to get it fixed. Until then, HTML Purifier performs a
basic check to prevent this.
If you want to use this directive, check out the other Filter.ExtractStyleBlocks directives in the configuration documentation, they're meant to be used together (or at least assessed together).

Double logo in wordpress site identity?

I need double logo in site identity of WordPress customizer. One on mobile view and other on desktop view. Both are different images. Please provide code for adding two logos.
I have code for adding one custom logo. and I need it on site identity itself
function lotus_flies_custom_logo_setup()
{
$defaults = array(
'height' => 139,
'width' => 176,
// 'flex-height' => true,
// 'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'lotus_flies_custom_logo_setup');
The best way to have different logo according to screen size is to use #media queries in CSS.
So you could just find out a css selector for your current icon, and add some css to resize it according to screen size, in your inherited custom template.
Instead of resizing, you could also just completely change the source of the image in CSS.
( As an inspiration: Swap out 3 differently-sized logos with media queries? . Documentation: Using_media_queries )

How to find an element using Watir by inline css styles

How can I find an element using it's inline style declaration?
Here's my attempt:
results = browser.div(:id => 'summon_panel')
.div(:class => 'tabs2_container')
.div(:class => 'pane_inner', :index => 4)
.div(:class => 'pagination_tabs_container')
.div(:style => 'display: block') # This is what I've added.
.divs(:class => 'rank')
And result:
Watir::Exception::UnknownObjectException (unable to locate element, using {:style=>"display: block", :tag_name=>"div"}):
app/controllers/streams_controller.rb:61:in `saveranks'
Copypasta at OP's request:
Is "display: block" the exact inline style on the element?

mPDF disable page number, header and footer on first page

I just used mPDF on my project and now stuck on this problem. First let me describe my PDF structure:
First page is a cover page.
Second page is Table Of Content page.
Third page is content page.
So the problem is :
There is header,footer,page number in cover page and TOC page. How do I remove that?
The content page number start with no 3. How do I reset it to become no 1?
Below is the code is used to include header and footer
$mpdf->SetHeader('{DATE j-m-Y}|{PAGENO}/2|My document');
$mpdf->SetFooter('{PAGENO}'); /* defines footer for Odd and Even Pages - placed at Outer margin */
$mpdf->SetFooter(array(
'L' => array(
'content' => 'Text to go on the left',
'font-family' => 'sans-serif',
'font-style' => 'B', /* blank, B, I, or BI */
'font-size' => '10', /* in pts */
),
'C' => array(
'content' => '- {PAGENO} -',
'font-family' => 'serif',
'font-style' => 'BI',
'font-size' => '18', /* gives default */
),
'R' => array(
'content' => 'Printed # {DATE j-m-Y H:m}',
'font-family' => 'monospace',
'font-style' => '',
'font-size' => '10',
),
'line' => 1, /* 1 to include line below header/above footer */
), 'E' /* defines footer for Even Pages */
);
And for TOC page, I add this tag in the html
<tocpagebreak />
You can setup your footer to be invisible at first, and then reset it when you want the numbering to start.
For example (using html tags):
<!-- sets up the footer -->
<pagefooter name="footer" content-center="{PAGENO}"></pagefooter>
<!-- disables it -->
<setpagefooter value="off"></setpagefooter>
<p>Some content for the first pages</p>
<!-- activates the footer and resets the numbering -->
<pagebreak odd-footer-name="footer" odd-footer-value="on" resetpagenum="1"></pagebreak>
I'm pretty sure the same can be achieved using the equivalent mpdf methods.

Button image is not working properly

I recently added a image to the edit button in YII.I do the following,
'class'=>'CButtonColumn',
'header' => 'Edit',
'template' => '{Edit}',
'buttons' => array(
'Edit' =>array(
'label' => 'Edit',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/Actions-document-edit.ico',
));
and css for the button goes like this,
td.button-column a img {
max-height:25px;
max-width:25px;
}
And the actual size of the image Actions-document-edit.ico is 25*25.
I have a situation here that, i have an 25*25 image in Google Chrome and 2*2 image in mozilla firefox. Help me to achieve the proper formatting of the image in both the browsers.
And suggest also the pagenation problem.
Instead of .ico try to use .JPEG or .png or .gif image
Pagenation problem was solved
.pager ul.yiiPager li.page:after{display: inline-block !important}
But still am getting image problem... Help please...

Resources