Ruler

Asked

Viewed 512 times

3

In some editors we have an orientation rule in which we can perform some configurations such as the spacing between the text and the revelry.

I need to produce something like: inserir a descrição da imagem aqui

I currently use a text editor called Summernote, it returns me all the text in html, for the user to print this document by transforming this html into a pdf with mpdf.

Example of an mpdf orientation:

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

Doubts:

1° How can I add a water to orienteering?

2° It is possible to obtain the result without the use of water?

3° There is another way to solve this problem?

php javascript jquery html css

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 different, although sometimes put inline css spans in the code, it does not handle the full-page CSS.

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

Only the possibility of controlling the indentation or advance of a specific section of the text, for example a quotation that is far from the edge of the page, will be missing. For this it is possible to develop some plugin for summernote or another editor that will increase or decrease the margin of the paragraph, adding the direct formatting in the tag, getting 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 view during editing to make it more real

To create a specific CSS for printing 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 the 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 http://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

To prevent Browser from adding header and footer information:

<html moznomarginboxes mozdisallowselectionprint>

However, it only works on newer Firefox versions.

  • +1, good answer, I’ll be testing each of these details, thank you!

Browser other questions tagged php javascript jquery html css

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