To make the question simpler to understand, I've made this very simple script :
<?php
if(!empty($_POST)){
$img = imagecreatetruecolor(300,100);
$font = "./custom_font/aquilinetwo-webfont.ttf";
$dimensions = imagettfbbox($_POST['font_size'],0,$font,$_POST['font_value']);
$x_pos = $_POST["font_pos_x"];
$y_pos = $_POST["font_pos_y"]+abs($dimensions[7]);
$color = imagecolorallocate($img, 255, 255, 255);
imagettftext($img,$_POST['font_size'],0,$x_pos,$y_pos,$color,$font,$_POST['font_value']);
imagepng($img, "./image.png");
}
?>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#form_font_value").keyup(function(){
$("#myImage span").html($(this).val());
});
$("#form_font_size").keyup(function(){
$("#myImage span").css("font-size",$(this).val()+"pt");
});
$("#form_font_x").keyup(function(){
$("#myImage span").css("left",$(this).val()+"px");
});
$("#form_font_y").keyup(function(){
$("#myImage span").css("top",$(this).val()+"px");
});
});
</script>
<style>
@font-face {
font-family: 'aquilinetworegular';
src: url('./custom_font/aquilinetwo-webfont.eot');
src: url('./custom_font/aquilinetwo-webfont.eot?#iefix') format('embedded-opentype'),
url('./custom_font/aquilinetwo-webfont.woff2') format('woff2'),
url('./custom_font/aquilinetwo-webfont.woff') format('woff'),
url('./custom_font/aquilinetwo-webfont.ttf') format('truetype'),
url('./custom_font/aquilinetwo-webfont.svg#aquilinetworegular') format('svg');
font-weight: normal;
font-style: normal;
}
#myImage {background-color:#000;width:300px;height:100px;margin-bottom:20px;position:relative;}
#myImage span {position:absolute;font-family:"aquilinetworegular";font-size:<?php echo @$_POST["font_size"]?$_POST["font_size"]:"12";?>pt;top:<?php echo @$_POST["font_pos_y"]?$_POST["font_pos_y"]:"0";?>px;left:<?php echo @$_POST["font_pos_x"]?$_POST["font_pos_x"]:"0";?>px;color:#FFF;}
</style>
</head>
<body>
<div id="myImage">
<span><?php echo @$_POST["font_value"]?$_POST["font_value"]:"YourText";?></span>
</div>
<form method="post">
Value : <input type="text" name="font_value" id="form_font_value" value="<?php echo @$_POST["font_value"]?$_POST["font_value"]:"YourText";?>"><br/>
Size : <input type="text" name="font_size" id="form_font_size" value="<?php echo @$_POST["font_size"]?$_POST["font_size"]:"12";?>">pt<br/>
Position X :<input type="text" name="font_pos_x" id="form_font_x" value="<?php echo @$_POST["font_pos_x"]?$_POST["font_pos_x"]:"0";?>">px<br/>
Position Y :<input type="text" name="font_pos_y" id="form_font_y" value="<?php echo @$_POST["font_pos_y"]?$_POST["font_pos_y"]:"0";?>">px<br/>
<input type="submit">
</form>
<hr>
<img src="image.png" alt="Send datas first">
</body>
</html>
What it must do ?
User choose where he want to put his text on an image. Then, the image is generated.
The problem :
The text is not placed on the correct Y axis position. Depending on the font family/size. The font-family can be changed. So I cannot "hard code" the position.
Where I think the problem can be :
imagettftext() doc says : argument Y is the position of the fonts baseline, not the very bottom of the character
So I suppose I need to add the height between the baseline and the top of the font to my Y position to get the exact same position as rendered in HTML/CSS. This is why I use the value 7 of imagettfbbox().
But it doesn't work. The Y position is sometimes good, sometimes bad. I don't understand why.
If you have an idea ... Thank you !
Result example :
