बॉक्स में फिटिंग पाठ

Question

मेरी वेबसाइट मैं उन पाठ की पंक्ति के साथ चित्रों को बनाने के लिए वे चित्र

वर्तमान में मैं कि ImageMagick परिवर्तित के लिए उपयोग पर तैयार की निर्दिष्ट की अनुमति देने पर - मैं svg टेम्पलेट निर्दिष्ट करें और जाने परिवर्तित बाकी

करना

यहाँ कोड का हिस्सा है जो चित्र

<text text-anchor="middle" x="50%%" y="%s" 
     font-family="Times New Roman" font-size="55" 
     style="fill:rgb(255,255,255);"> 
    %s 
    </text> 

मेरी समस्या यह है कि यदि उपयोगकर्ता बहुत लंबे तार प्रदान करता है, पाठ छवि में फिट नहीं करता है में पाठ outputting के लिए जिम्मेदार है।

मैं टेक्स्ट को फिट करने के लिए पाठ को स्वचालित रूप से छोटे फ़ॉन्ट में आकार बदलना चाहता हूं। एसवीजी टेम्पलेट्स के साथ क्या करना संभव है? यदि नहीं, तो अन्य समाधान क्या हो सकते हैं

Answer 1

svg को छोड़ और ImageMagick परिवर्तित और MVG टेम्पलेट

साथ सब कुछ कर करके हल यहाँ सरलीकृत स्क्रिप्ट उदाहरण मामले में किसी को भी इसी तरह की

स्क्रिप्ट एक छवि और कैनवास पर एक शीर्षक रहा है कुछ का पीछा रहा है। शीर्षक, अलग परिवर्तित कमांड के साथ बनाई गई है अस्थायी फ़ाइल के रूप में सहेजा और फिर कैनवास

#!/bin/sh 

TEMPLATE=" 
push graphic-context 
viewbox 0 0 600 600 
affine 1 0 0 1 0.0 0.0 
push graphic-context 
fill 'rgb(0,0,0)' 
rectangle 0,0 600,600 
pop graphic-context 
push graphic-context 
image Over 38,38 338,338 '%s' 
pop graphic-context 
push graphic-context 
image Over 36,400 529,55 '%s' 
pop graphic-context 
pop graphic-context 
"; 

#1. creating label fitting specified proportions 
#2. converting mvg template to jpeg image (and trimming it in process) 
#3. removing temp file with label 

convert -size 529x55 -background black -family "Times New Roman" -gravity center -fill white label:"$2" "tmp/$1title.jpg" && printf "$TEMPLATE" "images/$1.jpg" "tmp/$1title.jpg" | convert mvg:- -trim +repage -bordercolor black -border 36 "images/$1converted.jpg" && rm "tmp/$1title.jpg" 

#script parameters: $1 is image id, $2 is title text 

Answer 2

आप एसवीजी टेम्पलेट के भीतर एक स्क्रिप्ट जोड़ सकते हैं जिसे एसवीजी लोड किया जाता है और फ़ॉन्ट का आकार बदलने के लिए getComputedTextLength() का उपयोग करता है। यह एक हैकी समाधान का थोड़ा सा है, लेकिन ऐसा लगता है कि यह काम करता है।

यहां एक त्वरित उदाहरण है जो एक बॉक्स और उसके अंदर कुछ पाठ खींचता है। पाठ को हमेशा बॉक्स में फिट करने के लिए आकार दिया जाना चाहिए, चाहे कितना समय हो (कम से कम इंगित करने के लिए):

एसवीजी लोड होने पर कोड को कॉल करने के लिए एसवीजी में ऑनलोड = "int (evt)" शामिल है टैग।

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="400" height="80" 
    onload="init(evt)"> 

तब वास्तविक स्क्रिप्ट:

<script type="text/ecmascript"> 
    <![CDATA[ 

    function init(evt) 
    { 
     if (window.svgDocument == null) 
     { 
      svgDocument = evt.target.ownerDocument; 
     } 

     maximum_length = 300; 
     my_text = svgDocument.getElementById('text-to-resize'); 

     for (var font_size=55; font_size>0; font_size--) 
     { 
      if(my_text.getComputedTextLength() < maximum_length){break;} 
      my_text.setAttributeNS(null, "font-size", font_size); 
     } 

    } 

    ]]> 
    </script> 

मैं सिर्फ font-size घटती जब तक पाठ की लंबाई अधिकतम निर्दिष्ट से भी कम है पाश के लिए एक प्रयोग किया जाता है; मुझे यकीन है कि पाठ का आकार बदलने का एक बेहतर तरीका है।

अंत में वास्तविक पाठ और बॉक्स:

<rect id="rect1" x="20" y="10" width="320" height="50" fill="white" stroke="black"/> 
<text id="text-to-resize" 
     text-anchor="middle" 
     x="170" y="50" 
     font-family="Times New Roman" font-size="55"> 
whatever text 
</text> 
</svg> 

आप पाठ को बदलते हैं, font-size तो बदलना चाहिए कि यह बॉक्स के अंदर फिट बैठता है। आप टेक्स्ट को सही ढंग से केंद्रित करने के लिए शायद x- और y-values ​​को बदलना चाहेंगे।