PHP split font + Get char width

Question

I am trying to automate separating fonts or another project, but I just can't find the answer. What I mean by separate is to save each character with an ascii value from 32 to 126 into multiple svg files (preferrably convert text to path). My question is,how do I generate multiple svg files, each containing a specific character from a specific (ttf) font.

Answer 1

I wrote https://github.com/Pomax/PHP-Font-Parser for this quite a while ago; the fonttest.php generates JSON, but if you actually run the code you'll see that the JSON also contains the SVG path outline, which you can drop into an SVG skeleton with a <path d="..."/> element, and a viewbox set up to match the dimensions that the glyph's JSON provides.

Answer 2

My code below will create an image from a letter using a given font. Follow that to get your image, then look here for how to cenvert it to SVG..

    // Create an image from the letter "A" using a certain font at 12 points
    $image = createTextImage("A", "12", "font.ttf");

    /**
    * Make an image of text
    * @param type $text
    * @param type $size
    * @param type $color
    * @param type $font
    */
   function createTextImage($text, $font_size, $font_file){

          // Make sure font file exists
          if(!file_exists($font_file)) throw new Exception("Font file does not exist: {$font_file}");         

          // Retrieve bounding box:
          $type_space = imagettfbbox($font_size, 0, $font_file, $text);

          // Determine image width and height, 10 pixels are added for 5 pixels padding:
          $image_width = abs($type_space[4] - $type_space[0]) + 10;
          $image_height = abs($type_space[5] - $type_space[1]) + 10;
          $line_height = getLineHeight($font_size, $font_file) +10;

          // Create image:
          $image = imagecreatetruecolor($image_width, $image_height);

          // Allocate text and background colors (RGB format):
          $text_color = imagecolorallocate($image, 250, 250, 250);

          // Fill with transparent background
          imagealphablending($image, false);
          imagesavealpha($image, true);
          $transparent = imagecolorallocatealpha($image, 255, 255, 255, 127);
          imagefill($image, 0, 0, $transparent);

          // Fix starting x and y coordinates for the text:
          $x = 5; // Padding of 5 pixels.
          $y = $line_height - 5; // So that the text is vertically centered.

          // Add TrueType text to image:
          imagettftext($image, $font_size, 0, $x, $y, $text_color, $font_file, $text);

          // Save the image to a temp png file to use in our constructor
          $tmpname = tempnam('/tmp', 'IMG');

          // Generate and save image
          imagepng($image, $tmpname, 9);

          return $tmpname;
   }

   /**
   * Returns the line height based on the font and font size
   * @param type $fontSize
   * @param type $fontFace
   */
  function getLineHeight($fontSize, $fontFace){
    // Arbitrary text is drawn, can't be blank or just a space
    $type_space = imagettfbbox($fontSize, 0, $fontFace, "Robert is awesome!");
    $line_height = abs($type_space[5] - $type_space[1]);
    return $line_height;
  }