पाठ को पिछड़ा कैसे व्यवस्थित करें?

Question

मैं पाठ पीछे या इस वर्तमान पाठ के विपरीत तरीके को विपरीत करना चाहता हूं। क्या यह HTML/CSS या जावास्क्रिप्ट/jQuery के साथ भी करना संभव है?

Answer 1

रूप में मैं इस हो सकता है आप जो खोज रहे हैं लगता है? jsFiddle
कोड के साथ थोड़ा सा खेलें। अन्यथा यकीन है कि यह असंभव है। आप इस तरह के Paintshop के रूप में छवि संपादन सॉफ्टवेयर, में ऐसा कर सकते हैं, आदि

#skewed { 
font: 21px Impact, sans-serif; 
text-align: center; 
background: #ccc 
} 
#skewed { 
width:    350px; 
height:   140px; 

-moz-transform: skew(-5deg, -5deg); 
-o-transform:  skew(-5deg, -5deg); 
-webkit-transform: skew(-5deg, -5deg); 
transform:   skew(-5deg, -5deg); 
} 

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div> 

<!--[if IE]> 
<style> 
/* 
* The following two rules are for IE only and 
* should be wrapped in conditional comments. 
* The -ms-filter rule should be on one line 
* and always *before* the filter rule if 
* used in the same rule. 
*/ 

#skewed { 

    /* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, 
M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1, 
SizingMethod='auto expand')"; 

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
     M11=1, 
     M12=-0.08748866352592455, 
     M21=-0.08748866352592455, 
     M22=1, 
     SizingMethod='auto expand'); 


/* 
* To make the transform-origin be the middle of 
* the object. Note: These numbers 
* are approximations. For more accurate results, 
* use Internet Explorer with this tool. 
*/ 
    margin-left: -9px; 
    margin-top: -18px; 

} 
</style> 
<![endif]-->​  

Answer 2

आप टेक्स्ट को घुमाने में सक्षम हो सकते हैं।

http://snook.ca/archives/html_and_css/css-text-rotation

मुश्किल लगता है, लेकिन आप शायद एक प्रति-चरित्र के आधार पर यह करने के लिए होगा। काफी इच्छित स्कीविंग प्रभाव नहीं है, लेकिन करीब है।

Answer 3

मुझे लगता है कि एकमात्र तरीका एक विशेष फ़ॉन्ट का उपयोग करना होगा जो पीछे की ओर झुका हुआ है।

Answer 4

मेरा एकमात्र वास्तविक विकल्प मुझे विश्वास है कि एक फ़ॉन्ट को ढूंढना होगा (या बनाना) जिसमें पिछड़ा इटैलिक लेटरफॉर्म है और उसे कस्टम @font-face के माध्यम से अपने वेबपृष्ठ में एम्बेड करें।

है कि आप कई ऑनलाइन फॉन्ट-फेस जनरेटर का उपयोग कर सकते के लिए, ऐसे FontSquirrel

Answer 5

मैं jQuery का उपयोग करने के तो अंतराल में प्रत्येक अक्षर रैप करने के लिए, Mozilla's transform से उदाहरण का उपयोग प्रत्येक अक्षर को बदलने जोस 'प्रदर्शन अपडेट डॉक्स & एक demo:

एचटीएमएल

<div id="skewed"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. 
    Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a 
    malesuada erat. 
</div> 

jQuery

// html function requires jQuery 1.4+ 
$('#skewed').html(function (i, h) { 
    h = h.replace(/\s+/g, '\u00a0').split(''); 
    return '<span>' + h.join('</span><span>') + '</span>'; 
}); 

सीएसएस

#skewed { 
    font: 24px Georgia, sans-serif; 
    background: #ccc; 
    padding: 10px 20px; 
} 
#skewed span { 
    display: inline-block; 
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */ 
    -webkit-transform: skewx(20deg); 
      -o-transform: skewx(20deg); 
      transform: skewx(20deg); 
} 

Answer 6

अपनी वेबसाइट this one की तरह एक वामपंथी झुकाव इटैलिक संगत फ़ॉन्ट, में Use and embed। मुफ्त विकल्प here हैं।