Как подобрать размер рисунка, размер шрифта и разрешение (в DPI, точках на дюйм)
|
Страница в процессе перевода. |
Нам нужно создать три графика, которые будут включены в документ. Необходимо учесть приведенные ниже требования.
-
Рисунок 1: PNG-изображение размером 4 × 3 дюйма с разрешением 100 точек на дюйм (DPI)
-
Рисунок 2: PNG-изображение размером 9 x 7 см с разрешением 300 точек на дюйм (DPI)
-
Рисунок 3: SVG-изображение размером 4 × 3 дюйма
Размер всех трех шрифтов должен соответствовать установленному в документе значению, равному 12 пт.
Мы исходим из того, что размер рисунка Makie без единиц измерения на самом деле эквивалентен пикселям CSS. Более подробное объяснение приводится в разделе Размер и разрешение рисунка.
Мы используем Typst, но этот метод применим ко всем инструментам разработки, позволяющим задавать размеры включаемых изображений.
using CairoMakie
using Typst_jll
# these are relative to 1 CSS px
inch = 96
pt = 4/3
cm = inch / 2.54
f1 = Figure(size = (4inch, 3inch), fontsize = 12pt)
f2 = Figure(size = (9cm, 7cm), fontsize = 12pt)
f3 = Figure(size = (4inch, 3inch), fontsize = 12pt)
titles = [
"Figure 1: png @ 4x3 inches and 100 dpi",
"Figure 2: png @ 9x7 cm and 300 dpi",
"Figure 3: svg @ 4x3 inches",
]
data = cumsum(randn(100))
for (f, title) in zip([f1, f2, f3], titles)
ax = Axis(f[1, 1]; title, xlabel = "time (s)", ylabel = "value (€)")
lines!(ax, data)
end
save("figure1.png", f1, px_per_unit = 100/inch)
save("figure2.png", f2, px_per_unit = 300/inch)
save("figure3.svg", f3)
typst_code = """
#set page(fill: rgb("#f5f2eb"))
#set text(font: "TeX Gyre Heros Makie", size: 12pt, fill: luma(50%))
This is some text at 12pt which the figures below should match.
#image("figure1.png", width: 4in, height: 3in)
#image("figure2.png", width: 9cm, height: 7cm)
#image("figure3.svg") // vector graphics have physical dimensions
"""
open(io -> println(io, typst_code), "document.typ", "w")
cp(Makie.assetpath("fonts", "TeXGyreHerosMakie-Regular.otf"), "./texgyre.otf")
run(`$(Typst_jll.typst()) compile --font-path . document.typ output.svg`)