How to adjust the print of an Html in two columns?

5

Dear colleagues,

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

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

<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>
    
asked by anonymous 14.03.2017 / 15:10

1 answer

1

Hello

I think you can do this column splitting 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 effect of two columns will appear only in print (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)

    
14.03.2017 / 15:14