CODEWITHSUNDEEP
htmlcsstextextendspdf-to-html
Richardson Oge
Richardson Oge

Reputation: 1

The text in the div tag of the p tag is extended out

After converting the PDF to HTML using pdftohtml in my Ubuntu terminal, I translated this HTML file and the texts in this HTML extend completely into the p tag and its tags are inside the div tag. And when I tried to change the “white-space:nowrap” to “white-space:pre-rap;” of the div tag, it worked but the texts are sometimes above or below the other texts. I've spent hours on this HTML code trying to get it to work perfectly, but I can't and nothing works.

Here is the HTML code of the untranslated version:

<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
    <head>
        <title>GoodBadCorporation20</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

    <body style="margin: 0;">
        <br>
    <style type="text/css">
    <!--
        p {margin: 0; padding: 0;}  .ft160{font-size:17px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft161{font-size:17px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft162{font-size:18px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft163{font-size:27px;font-family:VLWUSA+AauxProOT;color:#231f20;}
    -->
    </style>
        <div id="page16-div" style="position:relative;width:918px;height:1188px;">
            <p style="position:absolute;top:612px;left:162px;white-space:nowrap" class="ft163">Stakeholder Capitalism</p>
            <p style="position:absolute;top:650px;left:189px;white-space:nowrap" class="ft161">Stakeholder capitalism refers to a conception of the corporation as a body that owes a </p>
            <p style="position:absolute;top:671px;left:162px;white-space:nowrap" class="ft161">duty not only to its <i>shareholders</i> (the predominant American view) but also to all of its <i>stake-</i></p>
            <p style="position:absolute;top:692px;left:162px;white-space:nowrap" class="ft160"><i>holders</i>, defined as all those parties who have a stake in the performance and output of the </p>
            <p style="position:absolute;top:713px;left:162px;white-space:nowrap" class="ft161">corporation. Stakeholders include the company’s employees, unions, suppliers, customers, </p>
        </div>
    </body>
</html>

Here's an image of the result of my HTML translation:

The result of my HTML translation

And here's an image of the result when I tried changing it from white-space:nowrap to white-space:pre-rap; :

white-space:nowrap to white-space:pre-rap;

Here's the HTML code for the translated version of my HTML :

<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
    <head>
        <title>GoodBadCorporation20</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

    <body style="margin: 0;">
        <br>
    <style type="text/css">
    <!--
        p {margin: 0; padding: 0;}  .ft160{font-size:17px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft161{font-size:17px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft162{font-size:18px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft163{font-size:27px;font-family:VLWUSA+AauxProOT;color:#231f20;}
    -->
    </style>
        <p style="position:absolute;top:612px;left:162px;white-space:pre-wrap;" class="ft163">Capitalisme des parties prenantes</p>
        <p style="position:absolute;top:650px;left:189px;white-space:pre-wrap;" class="ft161">Le capitalisme des parties prenantes fait r&eacute;f&eacute;rence &agrave; une conception de l'entreprise comme un organisme qui a un </p>
        <p style="position:absolute;top:671px;left:162px;white-space:pre-wrap;" class="ft161">devoir non seulement envers son <i>actionnaires</i> (le point de vue am&eacute;ricain pr&eacute;dominant) mais aussi &agrave; l'ensemble de ses <i>participations-</i></p>
        <p style="position:absolute;top:692px;left:162px;white-space:pre-wrap;" class="ft160"><i>titulaires</i>, d&eacute;finis comme toutes les parties qui ont un enjeu dans la performance et le r&eacute;sultat of la </p>
        <p style="position:absolute;top:713px;left:162px;white-space:pre-wrap;" class="ft161">soci&eacute;t&eacute;. </p>
    </body>
</html>

Here's the link to the project on GITHUB. You'll find the original HTML code and the translated version that produces this problem. And then try to change white-space:nowrap to white-space:pre-rap; you'll see the problem. Can you help me solve this problem? Any help would be greatly appreciated.

Upvotes: 0

Views: 67

Answers (1)

Will Carter
Will Carter

Reputation: 328

The issue is that all the p tag have specific positions.

For example, the starting position of the first p element is 162px from the left edge of the viewpoint and 612px from the top edge of the viewpoint.

When you change the white-space: nowrap to white-space:pre-rap;, it changed the height of the first p element. But, neither the starting position of the first p element nor the second p element has changed. So they overlapped.

You can remove all position, left and top CSS properties, which are related to element's position.

<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
    <head>
        <title>GoodBadCorporation20</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

    <body style="margin: 0;">
        <br>
    <style type="text/css">
    <!--
        p {margin: 0; padding: 0;}  .ft160{font-size:17px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft161{font-size:17px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft162{font-size:18px;font-family:VLWUSA+ACaslonPro;color:#231f20;}
        .ft163{font-size:27px;font-family:VLWUSA+AauxProOT;color:#231f20;}
    -->
    </style>
        <p style="white-space:pre-wrap;" class="ft163">Capitalisme des parties prenantes</p>
        <p style="white-space:pre-wrap;" class="ft161">Le capitalisme des parties prenantes fait r&eacute;f&eacute;rence &agrave; une conception de l'entreprise comme un organisme qui a un </p>
        <p style="white-space:pre-wrap;" class="ft161">devoir non seulement envers son <i>actionnaires</i> (le point de vue am&eacute;ricain pr&eacute;dominant) mais aussi &agrave; l'ensemble de ses <i>participations-</i></p>
        <p style="white-space:pre-wrap;" class="ft160"><i>titulaires</i>, d&eacute;finis comme toutes les parties qui ont un enjeu dans la performance et le r&eacute;sultat of la </p>
        <p style="white-space:pre-wrap;" class="ft161">soci&eacute;t&eacute;. </p>
    </body>
</html>

Upvotes: 0

Related Questions