CSS margin/padding is lost when copying/pasting from html page into MS-Word

Question

I have a web app with lots of text.
It uses indentation on most of its contents, which is important for the users who read it.

For simplicity, let's say this is the code:

<div style="margin-left:40px;">
    <div>One</div>
    <div>
        Two
        <div style="margin-left:40px;">
            <div>i</div>
            <div>ii</div>
            <div>iii</div>
        </div>
    </div>
    <div>
        Three
        <div style="margin-left:40px;">
            <div>A</div>
            <div>B</div>
            <div>
                C
                <div style="margin-left:40px;">
                    <div>x</div>
                    <div>y</div>
                    <div>z</div>
                </div>
            </div>
            <div>D</div>
        </div>
    </div>
    <div>Four</div>
</div>

The problem is that whenever the user copy portions of it (or it entirely) and paste it into MS Word (docx) the indentation is lost. I need to find a way to keep the indentation for this case use.

I tried with margin and padding, the same thing happens.

Any suggestions?

The strange thing is that I tried with ul-li (and ol-li) instead of divs, and it works: the indentation is kept after pasting into Word.

But I cannot use ul/ol because it automatically adds the bullets/numbers once pasted into the Word document, no matter what style I put from CSS (list-style-type:none).

https://stackoverflow.com/questions/20414504/how-do-i-replicate-a-t-tab-space-in-html возможно поможет — Савва Шишак, May 11 '20 at 12:00

Riley Worstell · Answer 1 · 2020-05-12T10:30:10.210

1

When styling each HTML object in the source, Word will then apply styles if you paste with the option "Keep source formatting", most of the CSS will be converted into a Word style.

<h2 style="border:2px solid #CCC;font-size:1.5em">Heading</h2>
style="text-indent: 5em;" within an html tag

edited May 12 '20 at 10:30

answered May 10 '20 at 22:10

Riley Worstell

66
5

Then what would you suggest to use for indentation in HTML/CSS, so that MS-Word understands it and convert it into its own Word-indentation-style? – zed May 10 '20 at 22:16
style="text-indent: 5em;" within an html – Riley Worstell May 12 '20 at 10:40

score 0 · Accepted Answer · answered May 25 '20 at 13:29

Short answer: The original DOM structure is not supported.

So I had to port it into the following DOM structure, where each block of text is represented as a <p></p> element, and each of those paragraphs having a cumulative margin-left value. This structure is compatible for copy+paste into MS-Word.

<p style='margin-left:40px'>One</p>
<p style='margin-left:40px'>Two </p>
<p style='margin-left:80px'>i</p>
<p style='margin-left:80px'>ii</p>
<p style='margin-left:80px'>iii</p>
<p style='margin-left:40px'>Three </p>
<p style='margin-left:80px'>A</p>
<p style='margin-left:80px'>B</p>
<p style='margin-left:80px'>C </p>
<p style='margin-left:120px'>x</p>
<p style='margin-left:120px'>y</p>
<p style='margin-left:120px'>z</p>
<p style='margin-left:80px'>D</p>
<p style='margin-left:40px'>Four</p>

CSS margin/padding is lost when copying/pasting from html page into MS-Word

2 Answers2