I'm trying to generate a PDF with correct characters using Laravel and dompdf but there is a "?" characters. I have created a test php file where I am trying to find the best solution. If I open an HTML browser I look fine
Take an example from this github
https://github.com/barryvdh/laravel-dompdf
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkout</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
color: #333333;
font-family: DejaVu Sans, sans-serif;
background-color: rgb(230, 227, 227);
padding-top: 50px;
padding-bottom: 50px;
}
.container {
padding: 80px 100px 42px 45px;
width: 1200px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 1px 1px 3px 1px #333;
}
header {
display: flex;
gap: 60px;
padding-bottom: 40px;
}
nav {
width: 70%;
}
.nav-top {
display: flex;
gap: 12px;
}
.nav-top img {
width: 70px;
height: 70px;
}
h1 {
font-size: 42px;
font-weight: 500;
margin-bottom: 15px;
}
.nav-top P {
font-weight: 600;
font-size: 16px;
}
aside {
display: flex;
flex-direction: column;
gap: 25px;
}
.aside-label {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.aside-value {
font-size: 28px;
font-weight: 600;
}
.aside-value span {
font-size: 18px;
font-weight: 600;
}
.nav-bottom {
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid rgb(209, 202, 202);
}
.nav-bottom h2 {
margin-bottom: 12px;
}
.passengers {
width: 100%;
}
.passengers .first-cell {
border-bottom: 1px solid rgb(209, 202, 202);
}
.passengers .first-col {
width: 60%;
}
.passengers .second-col,
.passengers .third-col {
width: 20%;
}
.cell {
display: flex;
}
.first-cell {
font-size: 12px;
padding-bottom: 2px;
}
.second-cell {
padding-top: 8px;
font-weight: 600;
}
.direction {
padding-bottom: 50px;
}
.direction-title {
display: flex;
align-items: end;
gap: 20px;
margin-bottom: 12px;
}
.direction-title p {
font-weight: 600;
font-size: 14px;
}
.direction tr:first-child {
font-size: 12px;
}
.direction tr:first-child td {
padding-bottom: 2px;
border-bottom: 1px solid rgb(209, 202, 202);
}
.direction tr:last-child td,
.direction tr:nth-child(2) td {
padding-bottom: 12px;
padding-top: 12px;
padding-right: 32px;
}
table {
border-collapse: collapse;
max-width: 95%;
}
table td {
vertical-align: top;
}
.direction tr:last-child td {
border-top: 1px solid rgb(209, 202, 202);
}
.direction tr:first-child td.last-item {
border-bottom: 1px solid #ffffff;
}
.direction-text {
font-size: 14px;
}
.direction-item__title {
font-size: 24px;
font-weight: 600;
}
.direction td:first-child {
width: 140px;
}
.last-item {
padding-left: 24px;
border-top: 1px solid #ffffff !important;
}
.information {
display: flex;
gap: 80px;
}
.information-block {
padding-top: 16px;
border-top: 4px solid gray;
width: 50%;
}
.information-block h2 {
margin-bottom: 20px;
}
.info-text {
font-size: 14px;
}
.info-text.first {
margin-bottom: 16px;
}
.hints {
display: flex;
gap: 16px;
flex-direction: column;
}
.hints div {
display: flex;
align-items: flex-start;
gap: 30px;
}
.hints div img {
width: 30px;
height: 30px;
}
.prices-block {
padding-bottom: 12px;
border-bottom: 4px solid gray;
}
.prices-block li {
display: flex;
margin-bottom: 4px;
}
.price__label {
width: 50%;
}
.price__value {
font-weight: 600;
}
.prices-extra {
padding-left: 8px;
}
.amount {
padding-top: 16px;
padding-bottom: 50px;
border-bottom: 4px solid gray;
}
.amount-top {
display: flex;
margin-bottom: 20px;
}
.amount-top h2 {
font-size: 28px;
width: 50%;
}
.amount-value {
font-weight: 600;
font-size: 30px;
}
.nds {
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.comment {
width: 50%;
}
.amount-bottom {
display: flex;
}
.extra {
font-size: 14px;
}
.amount-block {
width: 50%;
}
.address {
padding-top: 16px;
}
.address p {
font-size: 14px;
}
footer {
margin-top: 20vh;
}
.footer-text {
max-width: 60%;
font-size: 12px;
}
</style>
</head>
<body>
<div>
<div class="container">
<header>
<nav>
<div class="nav-top">
<img src="images/logo.png" alt="Logo" />
<div>
<h1>Маршрутная квитанция электронного билета</h1>
<p>Внимание! Это не посадочный талон</p>
</div>
</div>
<div class="nav-bottom">
<h2>Пассажиры</h2>
<div class="passengers">
<div class="first-cell cell">
<div class="first-col"></div>
<div class="second-col">Документ</div>
<div class="third-col">Номер билета</div>
</div>
<div class="second-cell cell">
<div class="first-col">MRS TEST TESTOV</div>
<div class="second-col">402111111</div>
<div class="third-col">42111111111</div>
</div>
</div>
</div>
</nav>
<aside>
<div class="aside-item">
<p class="aside-label">Бронирование</p>
<p class="aside-value"><span>S7 - </span>LOUJ9V</p>
</div>
<div class="aside-item">
<p class="aside-label">Оформлено</p>
<p class="aside-value">25 мая 2023</p>
</div>
<div class="aside-item">
<p class="aside-label">Статус</p>
<p class="aside-value">Подтверждено</p>
</div>
</aside>
</header>
<section class="direction">
<div class="direction-title">
<h2>Маршрут</h2>
<p>Указано местное время</p>
</div>
<table>
<tr>
<td>Рейс</td>
<td>Отправление</td>
<td>Прибытие</td>
<td>Класс и Тариф</td>
<td>Багаж</td>
<td class="last-item">Регистрация до</td>
</tr>
<tr>
<td>
<div class="direction-item">
<p class="direction-item__title">S7 5552</p>
<p class="direction-text">S7 Airlines Airbus A320</p>
</div>
</td>
<td>
<div class="direction-item">
<p class="direction-item__title">04 июн.</p>
<p class="direction-text">00:20 Душанбе, Душанбе</p>
</div>
</td>
<td>
<div class="direction-item">
<p class="direction-item__title">04 июн.</p>
<p class="direction-text">
05:35 Новосибирск, Толмачево Терминал B
</p>
</div>
</td>
<td>
<p class="direction-text">RSTOVB Эконом Стандарт</p>
</td>
<td>
<p class="direction-text">
1 место до 23 кг Ручная кладь до 10 кг
</p>
</td>
<td class="last-item">
<p class="direction-item__title">23:40</p>
<p class="direction-text">00:20 Душанбе, Душанбе</p>
</td>
</tr>
<tr>
<td>
<div class="direction-item">
<p class="direction-item__title">S7 5239</p>
<p class="direction-text">S7 Airlines Airbus A320</p>
</div>
</td>
<td>
<div class="direction-item">
<p class="direction-item__title">04 июн.</p>
<p class="direction-text">
21:10 Новосибирск, Толмачево Терминал A
</p>
</div>
</td>
<td>
<div class="direction-item">
<p class="direction-item__title">05 июн.</p>
<p class="direction-text">05:00 Хабаровск, Хабаровск (Новый)</p>
</div>
</td>
<td>
<p class="direction-text">RSTOVB Эконом Стандарт</p>
</td>
<td>
<p class="direction-text">
1 место до 23 кг Ручная кладь до 10 кг
</p>
</td>
<td class="last-item">
<p class="direction-item__title">20:30</p>
<p class="direction-text">21:10 Новосибирск, Толмачево</p>
</td>
</tr>
</table>
</section>
<section class="information">
<div class="information-block">
<h2>Информация</h2>
<p class="info-text first">
Быстрый доступ к информации о вашем бронировании: проверьте детали
вашего маршрута, отправьте билет родным и близким или внесите
изменения в данные пассажиров.
</p>
<div class="hints">
<div>
<img src="images/icons/1.png" alt="Hour" />
<p class="info-text">
Рекомендуем приехать в аэропорт минимум за 2 часа до вылета.
Комфортный запас времени избавит вас от лишних хлопот и суеты
перед рейсом. Регистрация на рейс открывается за 30 часов и
закрывается за 40 минут до вылета самолета. Вы можете
зарегистрироваться самостоятельно на сайте s7.ru, c помощью
приложения S7 для iPhone и Android или через киоски
самостоятельной регистрации.
</p>
</div>
<div>
<img src="images/icons/2.png" alt="Case" />
<p class="info-text">
Если вес, количество или габариты вашего багажа превышают
бесплатную норму, свяжитесь с нашим Контактным центром для его
оформления.<br /><br />
Статусный участник S7 Priority может провозить дополнительный
багаж БЕСПЛАТНО!
</p>
</div>
<div>
<img src="images/icons/3.png" alt="Phone" />
<p class="info-text">
Остались вопросы? Свяжитесь с нашим круглосуточным Контактным
Центром по телефону 8-800-700-0707 (бесплатно для звонков из
России) или +7(495)777-9999
</p>
</div>
</div>
</div>
<div class="information-block">
<div class="prices">
<h2>Стоимость</h2>
<ul class="prices-block">
<li>
<p class="price__label">Тариф</p>
<p class="price__value">346 EUR</p>
</li>
<li>
<p class="price__label">Эквивалент</p>
<p class="price__value">30 105 RUB</p>
</li>
<li>
<p class="price__label">Таксы</p>
<p class="price__value">845 RUB</p>
</li>
<li class="prices-extra">RUB 382RI</li>
<li class="prices-extra">RUB 296RI</li>
<li class="prices-extra">RUB 167RI</li>
</ul>
</div>
<div class="amount">
<div class="amount-top">
<h2>Итого</h2>
<div class="amount-block">
<p class="amount-value">30 950 RUB</p>
<p class="nds">Включая НДС 0 RUB</p>
<p class="extra">
INVOICE IN/A/ESINP <br />
30 950 RUB
</p>
</div>
</div>
<div class="amount-bottom">
<p class="comment">Примечания</p>
<div class="amount-block">
<p class="extra">
S7 <br />
ONLY/REF/CHNG/RESTR/ST/INCL <br />
VAT0.00RUB RATE <br />
1EUR=87.000000RUB
</p>
</div>
</div>
</div>
<div class="address">
<h2>Офис оформления</h2>
<p>
S7 Airlines, Ариана, Худжанд. Таджикистан, г.Худжанд, ул.К.Маркс
22
</p>
</div>
</div>
</section>
<footer>
<p class="footer-text">
Внимание: перевозка и другие предоставляемые перевозчиком услуги
подчиняются всем условиям договора перевозки с S7 Airlines или иного
перевозчика, фактически выполняющего ваш рейс, а также правилам
применения выбранного вами тарифа. Условия вашего договора перевозки,
а также вышеуказанные условия применения тарифа и правила перевозки
включены в настоящий авиабилет посредством ссылки на таковые. С
условиями договора перевозки (правилами перевозки, правилами
применения тарифов) можно ознакомиться в офисах продаж, на сайте S7
Airlines или перевозчика, фактически выполняющего ваш рейс. К
перевозке, имеющей пункт назначения или остановку не в стране
отправления, могут применяться положения варшавской или монреальской
конвенции, которые определяют и могут ограничивать ответственность
перевозчика за смерть или причинение вреда здоровью пассажира, а также
за утрату или повреждение багажа.
</p>
</footer>
</div>
</div>
</body>
</html>But when i try to upload to pdf some characters become ?????
What Im doing wrong? I tried many many options which I found :( Any idea?
