का उपयोग कर वक्र/आर्क टेक्स्ट का कोई तरीका है, मैं घुमावदार पाठ CSS3, HTML कैनवास, या यहां तक कि एसवीजी (उदाहरण के लिए नीचे छवि देखें) का उपयोग कर प्रभाव बनाने की कोशिश कर रहा हूं? क्या यह संभव है? यदि हां, तो मैं इस प्रभाव को कैसे प्राप्त कर सकता हूं?क्या CSS3/कैनवास
अद्यतन: स्पष्टीकरण के लिए: इस प्रकार स्टाइल किया जाएगा पाठ गतिशील होगा।
आप कैनवास के साथ यह निश्चित रूप से कर सकते हैं, एक उदाहरण के रूप में इस कोड की कोशिश:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="cnv"></canvas>
<script type="text/javascript" charset="utf-8">
cnv = document.getElementById("cnv");
cnv.width = 500;
cnv.height = 300;
ctx = cnv.getContext("2d");
ctx.font = "bold 12px sans-serif";
text = "abcdefghijklm"
for (i = 0; i < text.length; i++) {
ctx.fillText(text[i], 300, 100);
ctx.rotate(0.1);
}
</script>
</body>
</html>
यह यह बिल्कुल सही नहीं करता है, लेकिन मैं कुछ कर रहा हूँ आप का प्रबंधन करेंगे इसे अपनी तुलना में ट्विक करने के लिए;)
फेंकता है IE8 में जावास्क्रिप्ट त्रुटि लेकिन क्रोम में काम करता है। –
आईई के लिए आपको excanvas का उपयोग करना होगा: इसे जांचें http://diveintohtml5.org/canvas.html#ie –
नीचे दिया गया एसवीजी समाधान बहुत आसान लगता है। आप ऐसा क्यों करेंगे? –
मैं क्रोम में http://apike.ca/prog_svg_text.html से उदाहरण चलाने में सक्षम था लेकिन यह IE में काम नहीं करता है।
आप SVGWeb उपयोग कर सकते हैं, http://code.google.com/p/svgweb/
वैकल्पिक रूप से, आप एक HTTP हैंडलर की तरह (.NET/PHP में) सर्वर स्थल पर अपनी स्वयं की छवि पैदा उपयोगिता लिख सकते हैं और यह करने के लिए पाठ गुजरती हैं और यह GIF/PNG वापसी होगी कर सकते हैं आपके लिए फ्लाई पर ग्राफिक्स लाइब्रेरी और प्रतिपादन छवि का उपयोग करके।
या आप इसे कुछ सीएसएस का उपयोग करके कर सकते हैं, हालांकि मुझे यकीन है कि आप इसे किसी भी समय IE पर नहीं चल पाएंगे।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
.num1 {
-webkit-transform: translate(0px, 30px) rotate(-35deg);
}
.num2 {
-webkit-transform: translate(0px, 25px) rotate(-25deg);
}
.num3 {
-webkit-transform: translate(0px, 23px) rotate(0deg);
}
.num4 {
-webkit-transform: translate(0px, 25px) rotate(25deg);
}
.num5 {
-webkit-transform: translate(0px, 30px) rotate(35deg);
}
span {display: inline-block; margin: 1px;}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; margin: 50px auto">
<span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
</div>
</body>
</html>
सचमुच, मुझे आईई की परवाह नहीं है। यह एक आईफोन-अनुकूलित वेबसाइट के लिए है, इसलिए मैं केवल वेबकिट में प्रदर्शित होने के बारे में चिंतित हूं। मैं जावास्क्रिप्ट ट्रिकरी का उपयोग करके डायनामिक टेक्स्ट के लिए जो सुझाव दे रहा हूं उसे खींचने में सक्षम हो सकता हूं। धन्यवाद। – gabriel
आईई 9 + CSS3 2 डी ट्रांसफॉर्म का समर्थन करता है, और आईई 8 और नीचे माइक्रोसॉफ्ट के मैट्रिक्स का समर्थन करता है, लेकिन वे हैंडलिंग में थोड़ा अलग हैं। – JayC
@JayC हां और यह पोस्ट 2 साल पुराना है। मेरा मानना है कि '-ms-' उपसर्ग का उपयोग करना अधिकतर काम करना चाहिए, हालांकि मेरे पास परीक्षण करने का कोई साधन नहीं है। –
एसवीजी सीधे पाठ-ऑन-एक-पथ का समर्थन करता है, हालांकि यह 'मोड़' मार्ग के किनारे व्यक्ति ग्लिफ़ नहीं है डी: दूसरी ओर अच्छी बात यह है कि पाठ चयन है। यहाँ कैसे आप इसे बनाने के an example है:
...
<defs>
<path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
<textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
यह उत्तर क्यों नहीं है? अब तक का सबसे अच्छा समाधान लगता है? –
मुझे पता है यह एक वर्ष से अधिक देर हो चुकी है, लेकिन यहाँ मेरे समाधान
इसके चारों ओर पाठ लपेटता है, लेकिन मैं समझ नहीं अक्षरों के साथ लंबवत अक्षरों को कैसे फ़्लिप करें क्योंकि मैं वास्तव में वास्तव में कैनवास परिवर्तनों से नफरत करता हूं और मैं पाठ पर दो घूर्णन करने के लिए अपने सिर को लपेट नहीं सकता (वाई अक्ष के साथ एक बार फ्लिप करें और एक बार फिर एक काल्पनिक केंद्र के बारे में वृत्त)।
यह उत्कृष्ट काम है। क्या आपने 2011 में इसे विस्तारित किया है या पुस्तकालय बनाया है? –
<embed width="100" height="100" type="image/svg+xml" src="path.svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
</svg>
</embed>
यह tutorial है कि आप कैसा एचटीएमएल 5 और कैनवास का उपयोग कर यह करने के लिए पता चलता है। ऊपर दिए गए अन्य उत्तरों में से एक, कैनवास.रोटेट विधि का उपयोग करने के लिए एक समान विचार था। यह भी canvas.translate का उपयोग करता है।
arctext.js नामक CSS3 का उपयोग कर पाठ को वक्र करने के लिए एक jQuery प्लगइन है। यह बहुत अच्छा है और इसमें कई प्रकार के कॉन्फ़िगरेशन विकल्प हैं। मुझे लगता है कि यह IE8 पर काम नहीं करेगा लेकिन मुझे लगता है कि अधिकांश CSS3 चीज नहीं है!
एक्शन here में इसके कुछ उदाहरण के साथ एक डेमो पृष्ठ भी है।
आप इस jQuery प्लगइन को आजमा सकते हैं http://codecanyon.net/item/jquery-text-arch/3669779
टेक्स्ट मेहराब और टेक्स्ट सर्कल को अनुकूलित करने के लिए इसमें बहुत सारे विकल्प हैं।
सभी प्रमुख ब्राउज़रों और ओएस के
यह एक शुद्ध सीएसएस समाधान नहीं है लेकिन CircleType.js arced text के लिए बहुत अच्छा काम करता है।
ग्रेट सामान! यह काफी आसानी से काम करता है। ध्यान दें कि इसे एक और प्लगइन की आवश्यकता है ("Lettering.js आवश्यक है") – Rav
मैं कर्निंग समस्या के बारे में एक बेहतर समाधान लिखने के लिए ट्यूटोरियल ऊपर उल्लेख किया है (साइमन Tewsi द्वारा) का इस्तेमाल किया,। कोई पुस्तकालय, शुद्ध जेएस का उपयोग करता है।
पर http://jsfiddle.net/fidnut/cjccg74f/
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)
नोट यह देखें: अतः मांग कर रही है कि मैं यहाँ भी में JSFiddle से सभी कोड डाल दिया। मुझे नहीं लगता कि यह बुद्धिमान, बहुत अधिक कोड है, इसलिए मैं केवल फ़ंक्शन का नाम जोड़ रहा हूं।
आप इस तरह TextPath साथ एसवीजी का उपयोग कर सकते हैं:
<html>
<head>
<script>
function updateMessage(str) {
document.getElementById("MyMessage").textContent = str;
}
</script>
</head>
<body >
<button onClick="updateMessage('The text has changed');">Change the text</button>
<svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="CurvedPath"
d="M 0 150 Q 325 50 650 150 " />
</defs>
<text font-size="54" x='325' y='50' text-anchor="middle" fill="darkgreen" font-family=Arial,Helvetica style="text-shadow: 2px 2px 3px gray;"
> <textPath id='MyMessage' xlink:href="#CurvedPath" >
THIS TEXT IS CURVED
</textPath>
</text>
</svg>
</body>
</html>
http://tavmjong.free.fr/INKSCAPE/MANUAL/web/svg_tests.php से पता चलता है कि तुम क्या कर सकते हैं एसवीजी के साथ प्राप्त करें। स्रोत पर एक अच्छा नज़र आपको समाधान –
@ गैब्रियल, अजीब प्रश्न का पता लगाने में मदद कर सकता है: वह फ़ॉन्ट क्या है? यह स्वादिष्ट है। –
@ सुश्री: यह थोड़ी देर हो गया है, लेकिन मेरा मानना है कि यह फ़्यूचूरा है। – gabriel