I have created a calendar app in PHP with SVG where each month has a text row on top of the rectangle that represents the month. I developed it on a desktop PC, using the "monospace" font so that each day has the same pixel length. This looks good on my PC screen, but when I watched the calendar on an iPad and a cell phone, the SVG text was suddenly longer than the rectangle and did not fit anymore. I tried other font faces, but the effect was always the same. In some cases, the text becomes smaller than the graphics, and in others bigger. I thought that by using SVG, the text and the graphic elements were all vector graphics and would scale the same way. What can I do to make it work on all screens? I could add screenshots, but it looks like it's not possible to add images here. Here is the relevant part of the code
echo '<svg width="'.$svgW.'" height="'. $nM*($mHeight+$mOffset)+20 .'" xmlns="http://www.w3.org/2000/svg">'; // total size
echo '<rect x="0" y="'.$y0.'" width="'.$MonW -2 .'" height="'.$mHeight.'" style="fill:grey; stroke-width:2; stroke:rgb(0,0,0);" />'; // background for 1 month
echo '<rect x="1" y="'.$y0.'" width="'.$MonW -3 .'" height="34" style="fill:WhiteSmoke; stroke-width:1; stroke:rgb(0,0,0)" />'; // background for dates & days of the month
echo '<text x="14" y="' . $y0 +14 .'" font-size="15px" font-family="monospace" fill="black">'.sprintf('%02s',$mnr).' |</text>'; // month #
echo '<text x="5" y="' . $y0 +30 .'" font-size="15px" font-family="monospace" fill="black">'.$year.'|</text>'; // Year #
echo '<text x="49" y="' . $y0 +14 .'" font-size="15px" font-family="monospace" fill="black">'.$allDates.'</text>'; // all day #s
echo '<text x="49" y="' . $y0 +30 .'" font-size="15px" font-family="monospace" fill="black">'.$dayNames.'</text>'; // names of all days
echo '<rect x="2" y= "' . $y0 +35 .'" width="'.$aW.'" height="18 " style="fill:WhiteSmoke;" />'; // 4 x gray fields for apartments
echo '<rect x="2" y= "' . $y0 +54 .'" width="'.$aW.'" height="18 " style="fill:WhiteSmoke;" />';
echo '<rect x="2" y= "' . $y0 +73 .'" width="'.$aW.'" height="18 " style="fill:WhiteSmoke;" />';
echo '<rect x="2" y= "' . $y0 +92 .'" width="'.$aW.'" height="18 " style="fill:WhiteSmoke;" />';
echo '<text x="18" y="' . $y0 +49 .'" font-size="15px" font-family="monospace" fill="black">A</text>'; // 4x names of the apartments
echo '<text x="18" y="' . $y0 +68 .'" font-size="15px" font-family="monospace" fill="black">B</text>';
echo '<text x="18" y="' . $y0 +87 .'" font-size="15px" font-family="monospace" fill="black">C</text>';
echo '<text x="18" y="' . $y0 +106 .'" font-size="15px" font-family="monospace" fill="black">D</text>';
echo '<rect x="'.$mStart.'" y= "' . $y0 +35 .'" width="'.$ResW.'" height="18 " style="fill:rgb(0,255,0);" />'; // 4 green bars for reservations
echo '<rect x="'.$mStart.'" y= "' . $y0 +54 .'" width="'.$ResW.'" height="18 " style="fill:rgb(0,255,0);" />';
echo '<rect x="'.$mStart.'" y= "' . $y0 +73 .'" width="'.$ResW.'" height="18 " style="fill:rgb(0,255,0);" />';
echo '<rect x="'.$mStart.'" y= "' . $y0 +92 .'" width="'.$ResW.'" height="18 " style="fill:rgb(0,255,0);" />';
echo '</svg>';
I have added the HTML code rendered in the browser (Chrome) to show the actual values
<svg width="865" height="548" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="863.439" height="112" style="fill:grey; stroke-width:2; stroke:rgb(0,0,0);">
</rect>
<rect x="1" y="0" width="862.439" height="34" style="fill:WhiteSmoke; stroke-width:1; stroke:rgb(0,0,0)">
</rect>
<text x="14" y="14" font-size="15px" font-family="monospace" fill="black">10 |
</text>
<text x="5" y="30" font-size="15px" font-family="monospace" fill="black">2022|
</text>
<text x="49" y="14" font-size="15px" font-family="monospace" fill="black">
01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|
</text>
<text x="49" y="30" font-size="15px" font-family="monospace" fill="black">
Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|
</text>
<rect x="2" y="35" width="42" height="18 " style="fill:WhiteSmoke;">
</rect>
<rect x="2" y="54" width="42" height="18 " style="fill:WhiteSmoke;">
</rect>
<rect x="2" y="73" width="42" height="18 " style="fill:WhiteSmoke;">
</rect>
<rect x="2" y="92" width="42" height="18 " style="fill:WhiteSmoke;">
</rect>
<text x="18" y="49" font-size="15px" font-family="monospace" fill="black">A</text>
<text x="18" y="68" font-size="15px" font-family="monospace" fill="black">B</text>
<text x="18" y="87" font-size="15px" font-family="monospace" fill="black">C</text>
<text x="18" y="106" font-size="15px" font-family="monospace" fill="black">D</text>
<rect x="46" y="35" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="54" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="73" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="92" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="0" y="132" width="837.07" height="112" style="fill:grey; stroke-width:2; stroke:rgb(0,0,0);"></rect>
<rect x="1" y="132" width="836.07" height="34" style="fill:WhiteSmoke; stroke-width:1; stroke:rgb(0,0,0)"></rect>
<text x="14" y="146" font-size="15px" font-family="monospace" fill="black">11 |
</text>
<text x="5" y="162" font-size="15px" font-family="monospace" fill="black">2022|</text>
<text x="49" y="146" font-size="15px" font-family="monospace" fill="black">01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|</text>
<text x="49" y="162" font-size="15px" font-family="monospace" fill="black">Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|</text>
<rect x="2" y="167" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="186" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="205" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="224" width="42" height="18 " style="fill:WhiteSmoke;"></rect><text x="18" y="181" font-size="15px" font-family="monospace" fill="black">A</text><text x="18" y="200" font-size="15px" font-family="monospace" fill="black">B</text><text x="18" y="219" font-size="15px" font-family="monospace" fill="black">C</text><text x="18" y="238" font-size="15px" font-family="monospace" fill="black">D</text>
<rect x="46" y="167" width="791.07" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="186" width="791.07" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="205" width="791.07" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="224" width="791.07" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="0" y="264" width="863.439" height="112" style="fill:grey; stroke-width:2; stroke:rgb(0,0,0);"></rect>
<rect x="1" y="264" width="862.439" height="34" style="fill:WhiteSmoke; stroke-width:1; stroke:rgb(0,0,0)"></rect><text x="14" y="278" font-size="15px" font-family="monospace" fill="black">12 |</text><text x="5" y="294" font-size="15px" font-family="monospace" fill="black">2022|</text><text x="49" y="278" font-size="15px" font-family="monospace" fill="black">01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|</text><text x="49" y="294" font-size="15px" font-family="monospace" fill="black">Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|</text>
<rect x="2" y="299" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="318" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="337" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="356" width="42" height="18 " style="fill:WhiteSmoke;"></rect><text x="18" y="313" font-size="15px" font-family="monospace" fill="black">A</text><text x="18" y="332" font-size="15px" font-family="monospace" fill="black">B</text><text x="18" y="351" font-size="15px" font-family="monospace" fill="black">C</text><text x="18" y="370" font-size="15px" font-family="monospace" fill="black">D</text>
<rect x="46" y="299" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="318" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="337" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="356" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="0" y="396" width="863.439" height="112" style="fill:grey; stroke-width:2; stroke:rgb(0,0,0);"></rect>
<rect x="1" y="396" width="862.439" height="34" style="fill:WhiteSmoke; stroke-width:1; stroke:rgb(0,0,0)"></rect><text x="14" y="410" font-size="15px" font-family="monospace" fill="black">01 |</text><text x="5" y="426" font-size="15px" font-family="monospace" fill="black">2023|</text><text x="49" y="410" font-size="15px" font-family="monospace" fill="black">01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|</text><text x="49" y="426" font-size="15px" font-family="monospace" fill="black">Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|We|Th|Fr|Sa|Su|Mo|Tu|</text>
<rect x="2" y="431" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="450" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="469" width="42" height="18 " style="fill:WhiteSmoke;"></rect>
<rect x="2" y="488" width="42" height="18 " style="fill:WhiteSmoke;"></rect><text x="18" y="445" font-size="15px" font-family="monospace" fill="black">A</text><text x="18" y="464" font-size="15px" font-family="monospace" fill="black">B</text><text x="18" y="483" font-size="15px" font-family="monospace" fill="black">C</text><text x="18" y="502" font-size="15px" font-family="monospace" fill="black">D</text>
<rect x="46" y="431" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="450" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="469" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="488" width="817.439" height="18 " style="fill:rgb(0,255,0);"></rect>
<rect x="46" y="54" width="817" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="186" width="458" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="35" width="817" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="167" width="791" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="299" width="817" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="431" width="817" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="301" y="92" width="562" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="224" width="62" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="512" y="73" width="308" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="828" y="73" width="35" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="205" width="88" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="116" y="224" width="71" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="380" y="205" width="457" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="337" width="352" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="380" y="224" width="457" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="356" width="817" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="488" width="352" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="512" y="186" width="18" height="18" style="fill:yellow; stroke-width:1; stroke:grey"></rect>
<rect x="564" y="186" width="273" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="318" width="817" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="46" y="450" width="36" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="406" y="337" width="124" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="301" y="450" width="71" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="327" y="469" width="536" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="380" y="450" width="361" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="406" y="488" width="457" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
<rect x="749" y="450" width="114" height="18" style="fill:orange; stroke-width:1; stroke:grey"></rect>
</svg>
