Orientation Ruler

3

In some editors we have an orientation ruler in which we can make some settings, for example  the spacing between text and foliage.

I need to produce something like:

IcurrentlyuseaTextEditorcalled Summernote , it returns all the text in html, for the user to print this document I transform this html into a pdf with mpdf .

Example of an mpdf orientation:

 $mpdf=new mPDF('utf-8', 'A4-L');

Questions:

1 ° How can I add a rule for guidance?

2 ° Is it possible to obtain the result without using the ruler?

3 ° Is there another way to solve this problem?

    
asked by anonymous 05.11.2015 / 19:23

1 answer

2

I believe that in summernote it will be difficult to implement this feature because the purpose for which it was developed was another, although sometimes it puts spans with inline css in the code, it does not handle the CSS of a whole page.

To generate PDF you have to check if the used class interprets CSS mainly for external files, most accepts only inline CSS. And if they do, you can add fields in the form for the user to set the page by setting margin, page orientation, and sheet type.

You will only have the ability to control the indentation or advancement of a specific passage of the text, for example a quote that is distanced from the edge of the page. For this you can develop some plugin for summernote or another editor that will increase or decrease the side margins of the paragraph by adding the direct formatting in the tag, something like this:

<p style="margin-left: 20px; margin-right: 20px;>Parágrafo</p>

But if you want to develop some of these editor for printing or PDF generation here are some tips.

It is possible to format the page preview while editing to make it more real

To create a print-specific CSS, use media types.

@media screen {
    …
}
@media print {
    …
}

Or for separate files:

<link rel="stylesheet" href="css/screen.css" media="screen"/>
<link rel="stylesheet" href="css/print.css" media="print"/>

Setting page size

@media print {
    @page {
        // size: auto; Para adaptar a posição configurada no browser.
        // size: portrait; Para página em posição retrato.
        // size: landscape; Para página em posição paisagem.
        size: 8.5in 11in;  // largura altura

        // E para configurações específicas quando o browser encontrar uma
        // determinada tag.
        @page rotated { size : landscape }
        table { page : rotated }

        // Para configurar páginas de impressão frente e verso
        @page :left {
            margin-left: 4cm;
            margin-right: 3cm;
        }
        @page :right {
            margin-left: 3cm;
            margin-right: 4cm;
        }

        // Configurando a primeira página
        @page :first {
            margin-top: 10cm;
        }

        // Controlando quebra de página de acordo com uma determinada tag
        // auto: Definição de quera de página padrão
        // right: Quebra para a página da direita em impressão frente e verso
        // left: Quebra para a página da esqueda em impressão frente e verso
        // avoid: Evita que quebra página
        // always: Sempre quebra página
        h1 { page-break-before : right }
        h2 { page-break-after : avoid }

        // Para evitar que elementos se quebrem no meio
        table { page-break-inside : avoid }

        // Para evitar páginas com poucas linhas apenas, da pra definir
        // quantas linhas a mais serão permitidas por página até que a
        // quebra de linha ocorra, ou quantas linhas mínimas no topo da 
        // página são permitidas antes de que a quebra de linha ocorra.
        @page {
            orphans: 4; // Define o número de linhas no fim da página.
            widows:2; // Define o número de linhas no topo da página.
        }
    }
}

Other tips for formatting the page for printing can be found at

To prevent Browser from adding the header and footer information:

<html moznomarginboxes mozdisallowselectionprint>

But it only works on newer versions of Firefox.

    
14.11.2015 / 00:03