I have an html file, which should look like this:
But when I export to pdf using this code:
html_filename = "concrete_beam_report.html"
pdf_filename = "concrete_beam_report.pdf"
html_path = builder.save_report(".", filename=html_filename.replace('.html', ''), open_on_save=False)
pdf_path = os.path.join(".", pdf_filename)
pdfkit.from_file(html_path, pdf_path)
I get this:
Any idea why is this happening?
<!DOCTYPE html>
<html style="background-color: #eeeeee;">
<head>
<script>
window.MathJax = {
output: {
displayOverflow: "scale",
},
};
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/4.0.0-beta.7/tex-mml-chtml.min.js"></script>
<style>
body {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
max-width: 850px;
}
p {
margin-block-start: 0;
margin-block-end: 0.5em;
line-height: 1.1;
}
.calc-item {
margin-block: 1.5rem;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #bdbdbd;
text-align: left;
padding: 8px;
}
th {
border-bottom: 2px solid #424242;
}
table.striped tr:nth-child(even) {
background-color: #e0e0e0;
}
@media print {
body {
box-shadow: none;
max-width: none;
}
}
</style>
</head>
<body style="margin-inline: auto; padding: 1rem; background-color: #ffffff;">
<h1>Concrete Beam Neutral Axis</h1><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>Determine the neutral axis depth in a singly reinforced concrete beam.</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><h2>1. Inputs</h2><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Area of reinforcing steel;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( A_s = 3 \ \mathrm{in^2} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Yield strength of reinforcing steel;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( f_y = 50 \ \mathrm{ksi} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Concrete compressive strength;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( f'_c = 4 \ \mathrm{ksi} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Beam width;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( b = 12 \ \mathrm{in} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><div style="display:flex; flex-direction:row; justify-content:flex-start"><p style="width:350px;">Compressive stress block ratio;</p> <p style="display:inline-block; margin-bottom:1rem; margin-left: 3rem">\( \beta_1 = 0.85 \ \mathrm{} \)</p></div></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div><h2>2. Calculations</h2><div class="calc-item"><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>\[ \begin{align} a &= \frac{ {A_s} \cdot {f_y} }{ {0.85} \cdot {f'_c} \cdot {b} } = \frac{ 3 \ \mathrm{in^2} \cdot 50 \ \mathrm{ksi} }{ 0.85 \ \mathrm{} \cdot 4 \ \mathrm{ksi} \cdot 12 \ \mathrm{in} } \\[4pt] & \therefore a = 3.676 \ \mathrm{in} \end{align} \]</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div></div><div class="calc-item"><p style="margin-left: 2rem;">Neutral axis depth</p><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>\[ \begin{align} c &= \frac{ {a} }{ {\beta_1} } = \frac{ 3.676 \ \mathrm{in} }{ 0.85 \ \mathrm{} } \\[4pt] & \therefore c = 4.325 \ \mathrm{in} \end{align} \]</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"><span>[ACI 318-14 22.2.2.4.1]</span></div></div></div><div class="calc-item"><div style="display:flex; flex-direction:row; justify-content:space-between; margin-left: 2rem;"><div style="display: flex; flex-direction: column; justify-content: center;"><p>\[ \begin{align} Check \ c \ & > \ 3.5 \\[4pt] \ 4.325 \ \mathrm{in} \ & > \ 3.5 \\[4pt] &\therefore OK \end{align} \]</p></div> <div style="display: flex; flex-direction: column; justify-content: center;"></div></div></div>
</body>
</html>
I have an html file, which should look like this:
But when I export to pdf using this code:
I get this:
Any idea why is this happening?