Forum


Replies: 1   Views: 92
Html styling for div, hr and borders around p

Posted by vpratfr  · 06-07-2020 - 16:51

Hi,

I have a lot of trouble figuring how to make a simple framed paragraph with background color.

The HTML looks like that: https://jsfiddle.net/tp1jbqzo/1/

<p style="border: 0.2pt solid #999999; padding: 40pt; background: #f0f0f0;">
    Some text here
</p>

However the rendering in Word looks more like a margin is applied instead of a padding (in word it looks more like: https://jsfiddle.net/tp1jbqzo/2/) -> Basically my border and background stick to the text boundaries and padding behaves more like margin.

How can we make margin and padding work as expected on divs and paragraphs?

How can we space the border from the text?

(Note that I tried really hard to understand that by looking into your documentation but I failed to find the right place to get CSS/HTML related topics).

Posted by admin  · 06-07-2020 - 18:23

Edited by admin · 06-07-2020 - 18:40

Hello,

paragraphs in MS Word don't work in the same way than HTML. We recommend you to open MS Word and generate a new paragraph with the output you'd like to get, as you can check, you can't apply a padding to a paragraph unless you add a border, this border allows to set custom internal paddings. The current version of HTML to DOCX doesn't allow applying a spacing value when adding a paragraph border, so you'd need to use a custom paragraph style:

$style = array(
    'backgroundColor' => '#999999',
    'border' => 'single',
    'borderColor' => '#999999',
    'borderWidth' => 1,
    'border_top_space' => 20,
    'border_bottom_space' => 20,
    'textAlign' => 'center',
);
$docx->createParagraphStyle('myParagraphStyle', $style);

$html = '
    <p class="myParagraphStyle">My paragraph</p>
';
$docx->embedHTML($html, array('wordStyles' => array('.myParagraphStyle' => 'myParagraphStyle'), 'strictWordStyles' => true));

paddings and margins applied to paragraph are added to phpdocx in the same way than MS Word and both values increment the margins from other contents/margins.

As alternative, and maybe easiest approaches, you could use a table with a single cell or add a textbox.

Regards.