mPDF div заканчивается строкой (вероятно) - PullRequest
1 голос
/ 24 февраля 2020

Я работаю над экспортом моей страницы в pdf, используя mpdf. Проблема в том, что мне нужны мои аккорды над текстом. Но каждый аккорд начинает новую страницу, и номера стихов вообще не отображаются ...

Я получаю текст песни из уценки с помощью разборов до html, а затем в pdf

css:

    .wrapper{
        display: inline-block;
        position: relative;
        margin-top: 4ex;
    }

    .chord{
        font-weight: bold;
        position: absolute;
        bottom: 1.6ex;
    }

    .verse{
        font-weight: bold;
        position: relative;
        margin-top: 3em;
    }

    .verse::after{
        content: attr(number);
        font-weight: bold;
        transform: translateX(-120%);
        position: absolute;
        bottom: 0;
        width: max-content;
    }

php:

$object = \Spatie\YamlFrontMatter\YamlFrontMatter::parse(file_get_contents(__DIR__ . '/songs/' . $f));
    $song = str_replace('<verse', '<p class="verse"', $object->body());
    $song = str_replace('</verse>', '</p>', $song);
    $song = str_replace('<wrapper><chord>', '<p class="wrapper"><p class="chord">', $song);
    $song = str_replace('</chord></wrapper>', '</p></p>', $song);
    $pdf->AddPage();
    $pdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);
    if ($object->matter('capo') != null) {
        $pdf->WriteHTML('<div class="capo">Capo ' . $object->matter('capo') . '</div>', \Mpdf\HTMLParserMode::HTML_BODY);
    }
    $pdf->WriteHTML(
        '<div style="position: absolute; width: 190.08mm; left: 53.46mm;top: 0; max-height: 265px">
              <h1>' . $object->matter('title') . '</h1>
              <h2>' . $object->matter('author') . '</h2>
              <div class="song_body"><p id="song_text">' . $song . '</p></div></div>',
        \Mpdf\HTMLParserMode::HTML_BODY
    );

md файл:

<verse number="1:"></verse><wrapper><chord>Am</chord></wrapper>I walk a <wrapper><chord>C</chord></wrapper>lonely road<Br>

How it should look like How it looks like

...