How to adjust the printing of an HTML in two columns?

Asked

Viewed 1,195 times

5

Dear colleagues,

I’m developing a PHP program with zend Framework2. In this program I have generate a stylized PDF containing the header, body and footer (I am using DOMPDF). The basic structure of the three div’s is already up and running, with the required print spacings and repeats of the header and footer, whenever a page breaks.

Now I need to work specifically on body styling. I have a single FOREACH to search the data and I need to make this command fill the body in two columns vertically, starting from left to right. Only after filling the two columns should the page break occur.

inserir a descrição da imagem aqui

<html>
<head>
    <link rel="stylesheet" href="../../../../../public/assets/css/bootstrap.css">
    <meta charset=utf-8"/>
    <title>Layout de Impressão</title>

    <style type="text/css">
        @page {
            margin: 120px 50px 80px 50px;
        }

        #topo {
            background-repeat: no-repeat;
            font-size: 25px;
            text-align: center;
            height: 110px;
            width: 100%;
            position: fixed;
            top: -75px;
            left: 0;
            right: 0;
            margin: auto;
        }

        #corpo {
            width: 700px;
            position: relative;
            margin: auto;
            top: 75px;
        }

        #rodape {
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: right;
            border-top: 1px solid gray;
        }

        .rodape .page:after {
            content: counter(page);
        }

        .bloco_pai {
            width: 100%;
            position: relative;
        }

        .bloco_filho_centralizado {
            margin: 0 auto;
            width: 50%;
        }

        .bloco_filho_direita {
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .bloco_filho_esquerda {
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
<div id="topo" class="text-center">
    <div class="bloco_filho_esquerda">
        <img src="../../../../../public/assets/img/logo/logo-menu2.png" width="160" height="60"/>
    </div>
    <div class="bloco_filho_direita">
        <img src="../../../../../public/assets/img/logo/logo-menu.png" width="160" height="60"/>

    </div>
</div>

<div id="rodape">
    <div class="page" align="right"><span>Arquivo gerado em: </span>
        <?php
        $data = date("d/m/Y H:i");
        #xd($data);
        echo $data;
        ?>

    </div>
</div>
<div id="corpo">
    <?php
    $nrQuestoes = count($arQuestoesProva);
    if ($nrQuestoes == 0) { ?>
        <div style="text-align: left" class="row form-group">
            <div class="col-md-12">
                <?php
                echo "<h2> Nao existem questoes adicionadas a esta avaliação</h2>";
                ?>
            </div>
        </div>
        <?php
    } else {
        echo "<h2 style='text-align: center'> Questoes da Prova </h2>";
        ?>
        <div style="text-align: left" class="row form-group">
            <div class="col-md-12">
                <?php
                $questaoService = new \Questao\Service\QuestaoService();
                $alternativaquestaoService = new \AlternativaQuestao\Service\AlternativaQuestaoService();
                $i = 1;
                foreach ($arQuestoesProva as $key => $item) {
                    $arQuestao = $questaoService->buscar($item['id_questao'])->toArray();
                    echo "<h4>" . $i++ . " - " . $arQuestao['nm_titulo_questao'] . "</h4>";
                    echo "<p>" . $arQuestao['tx_enunciado'] . "</p>";
                    $arAlternativaQuestao = $alternativaquestaoService->fetchAllById(['id_questao' => $item['id_questao']]);
                    $j = 'a';
                    foreach ($arAlternativaQuestao as $key => $alternativa) {
                        echo "<p>" . $j++ . ") " . $alternativa['tx_alternativa_questao'] . "</p>";
                    }
                    echo "<br/>";
                } ?>
            </div>
        </div>
        <?php
    }
    ?>
</div>
<?= $dadosProva->getDsProva() ?>
</body>

</html>

php html css impression

1 answer

1


Hello!

I believe you can do this column division for printing with the following CSS Media Query:

@media print {
    .conteudo {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
}

With this Media Query, the two-column effect will appear only on printing (You can see the effect with Ctrl + p).

Select the parent div of all the content you want in 2 columns. (In case I think it would be this class: content)

  • To view print version and be able to inspect the code and such, you can open in the Chrome console, press "Esc", tab "Rendering", mark the "CSS media emulate" and select "print"

  • 1

    @Good Luizrossi. I didn’t know that. Usually I only gave a Ctrl + P even though it already appeared in print.

  • @Leonfreire is not quite what I need. Filling in two columns should occur only in the body. I edited the question and the code for a better understanding.

  • @Eduardoferreira All you have to do is apply the CSS that I just passed on to your body. I used it in the content because it looked like the body part of your page.

  • @Leonfreire unfortunately is not working. when I ask to print the dompdf is not recognizing the division of the columns. but thank you

  • @Eduardoferreira You tried to change the .conteudo that I used for #corpo?

  • @Leonfreire yes. On screen, the code you gave me is working perfectly. I think the problem is even in DOMPDF, which is not recognizing this CSS, when a print is requested.

Show 2 more comments

Browser other questions tagged php html css impression

You are not signed in. Login or sign up in order to post.