मैं CSS क्रॉस-ब्राउज़र के साथ ऊर्ध्वाधर पाठ कैसे बना सकता हूं?

Question

मैं क्रॉस-ब्राउज़र (> = IE6,> = फ़ायरफ़ॉक्स 2, क्रोम, सफारी या ओपेरा के किसी भी संस्करण) के साथ पाठ के एक शब्द को 90 डिग्री तक घुमाना चाहता हूं। यह कैसे किया जा सकता है?

Comments

कोई शुद्ध सीएसएस नहीं है जिसे आप क्रॉस संगतता के साथ उपयोग कर सकते हैं। मुझे जो मिला है वह सब है। आप एक छवि के साथ बेहतर हैं।

— रॉबर्ट के

वर्टिकल टेक्स्ट क्रॉसब्रोसर इतना मुश्किल नहीं है। Dns4.nl पर एक समाधान है जो ओपेरा में भी काम करता है। मैंने इसे सभी संस्करणों अर्थात मोज़िला और सफारी (ताज भी) के साथ परीक्षण किया। लिंक है: dns4.nl/pagina/html_code/vertikale_tekst.html । xkcd150 के लिए टिप्पणी :> समस्या यह है, कि कैनवास तत्व पर निर्भर है। - xkcd150 20 सितंबर को 10:13 नहीं, प्रक्रिया कैनवास तत्व पर निर्भर नहीं है।

यहाँ एक ट्यूटोरियल है जो यह बताता है कि IE में भी सभी प्रकार के टेक्स्ट ट्रांसफ़ॉर्मेशन कैसे करें (अपनी समस्या के समाधान सहित) :) useragentman.com/blog/2010/03/09// आशा है कि यह मदद करता है!

— जुआनमा गुरेरो

यहाँ पर मेरे द्वारा उपयोग की गई तकनीक का एक विराम है

मैं इस पृष्ठ पर दिए गए निर्देशों का सफलतापूर्वक पालन कर सकता हूं, लेकिन मैं पृष्ठ को प्रिंट नहीं कर सकता। पाठ पीछे की ओर मुद्रित हो जाता है। : यह वेबसाइट मेरे लिए बहुत उपयोगी था sevenwires.com/play/UpsideDownLetters.html

— Nahuel

Answer 1

हाल ही की जानकारी ( CSS ट्रिक्स से ) के साथ इस उत्तर को अपडेट करें । फिल्टर कार्यान्वयन को इंगित करने के लिए कुदोस टू मैट और डगलस।

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

पुराना उत्तर:

FF 3.5 या Safari / Webkit 3.1 के लिए, देखें: -moz-transform (और -webkit-transform)। IE में एक मैट्रिक्स फ़िल्टर (v5.5 +) है, लेकिन मैं निश्चित नहीं हूं कि इसका उपयोग कैसे किया जाए। ओपेरा में अभी तक कोई परिवर्तन क्षमता नहीं है।

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

Comments

+1 भूत भालू आइकन के लिए;) इस काम को करने में मुझे बहुत परेशानी हुई, मैंने अपनी डोम संरचना को बदलने और एक नकारात्मक मार्जिन के साथ फ्रॉड करने के लिए समाप्त कर दिया। एक IE संस्करण जो उपयोग करने के लिए सरल है, लेकिन पृष्ठ प्रिंट होने पर सही नहीं दिखता है: लेखन-मोड: tb-rl; फ़िल्टर: फ्लिपव फ्लिप;

— RMorrisey

Microsoft "फ़िल्टर: प्रोगिड: DXImageTransform.Microsoft.BasicImage (रोटेशन = 3);"

— मैट

दुर्भाग्य से, IE9 (मानक मोड में!) दोनों -एमएस-ट्रांसफॉर्म- * शैलियों, और फ़िल्टर को लागू करता है। संगतता दृश्य में, यह केवल फ़िल्टर लागू करता है।

— रोमलोक

सुनिश्चित करें कि आपका पाठ एक ब्लॉक तत्व है अर्थात प्रदर्शन का उपयोग करें: इनलाइन-ब्लॉक या समान

— जेम्स वेस्टगेट

यहाँ IE8 और IE9 अच्छाई के लिए कुछ फिल्टर दिए गए हैं। पहला IE8 है, दूसरा IE8 मानक मोड है, और # 3 IE9 + के लिए फ़िल्टर निकालता है। Arrrgh, मुझे अपने CSS हैक्स को फ़िल्टर करने से रोकने के लिए स्टैक्वरफ़्लो टिप्पणी नहीं मिल सकती है, इसलिए jsfiddle.net/GrPyj/9

— जस्टिन अनुदान देखें

Answer 2

मैं एक पृष्ठ में ऊर्ध्वाधर पाठ लिखने के लिए निम्नलिखित कोड का उपयोग कर रहा हूं। फ़ायरफ़ॉक्स 3.5+, वेबकिट, ओपेरा 10.5+ और IE

.rot-neg-90 {
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Comments

क्रोम पर काम करता है 5. IE 8 "quirks" मोड पर काम नहीं करता है; "IE8 मानक मोड" पर काम करता है ।

— आसफ बारतोव

मुझे बताने के लिए धन्यवाद। कृपया इसे यहाँ पोस्ट करें, यदि आपको quirks मोड के अंतर्गत IE में वर्टिकल टेक्स्ट रखने का तरीका मिल जाए।

— चोसांग

Answer 3

एक अन्य समाधान एक एसवीजी टेक्स्ट नोड का उपयोग करना है जो अधिकांश ब्राउज़रों द्वारा समर्थित है ।

<svg width="50" height="300">
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>

डेमो: https://jsfiddle.net/bkymb5kr/

एसवीजी पाठ पर अधिक: http://tutorials.jenkov.com/svg/text-element.html

Comments

महान समाधान, पिछले वाले की तुलना में बेहतर - घुमाए जाने के बाद पाठ की स्थिति के साथ कोई समस्या नहीं

— पिकार्ड

Answer 4

सीएसएस लेखन मोड मॉड्यूल खड़ी पाठ के साथ ओर्थोगोनल प्रवाह परिचय देता है।

बस writing-modeवांछित मूल्य के साथ संपत्ति का उपयोग करें ।

span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }

<span id="vertical-lr">
  ↑ (1) vertical-lr 至<br />
  ↑ (2) vertical-lr 至<br />
  ↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
  ↓ (1) vertical-rl 至<br />
  ↓ (2) vertical-rl 至<br />
  ↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
  ↓ (1) sideways-lr 至<br />
  ↓ (2) sideways-lr 至<br />
  ↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
  ↓ (1) sideways-rl 至<br />
  ↓ (2) sideways-rl 至<br />
  ↓ (3) sideways-rl 至
</span>

Comments

बग़ल-आरएल अब तक व्यापक रूप से समर्थित नहीं है, मैं ऊर्ध्वाधर-आरएल और 180 डिग्री तक घूमने की सिफारिश करूंगा

— Godblessstrawberry

Answer 5

मैंने इसे http://snook.ca/archives/html_and_css/css-text-rotation से अनुकूलित किया :

<Style>
    .Rotate -90
    {
        प्रदर्शन क्षेत्र;
        स्थिति: निरपेक्ष;
        सही: -5 पीएक्स;
        शीर्ष: 15 पीएक्स;
        -webkit- परिवर्तन: रोटेट (-90deg);
        -मोज़-ट्रांसफ़ॉर्म: रोटेट (-90deg);
    }
</ Style>
<! - [अगर IE]>
    <Style>
        .रोट -90
            फ़िल्टर: progid: DXImageTransform.Microsoft.BasicImage (रोटेशन = 3);
            सही: -15px; शीर्ष: 5px;
        }
    </ Style>
    <[Endif] ->

Answer 6

मेरे पास इसे शुद्ध CSS में करने की कोशिश करने में समस्या है - फ़ॉन्ट के आधार पर यह थोड़ा उबड़ खाबड़ लग सकता है। एक विकल्प के रूप में आप इसे करने के लिए SVG / VML का उपयोग कर सकते हैं। ऐसे पुस्तकालय हैं जो इसे राफेल और एक्सटीजेएस जैसे आसानी से पार करने में मदद करते हैं । ExtJS4 में कोड इस तरह दिखता है:

    var drawComp = Ext.create('Ext.draw.Component', {
        renderTo: Ext.getBody(), //or whatever..
        height: 100, width: 100 //ditto..
    });
    var text = Ext.create('Ext.draw.Component', {
        type: "text",
        text: "The text to draw",
        rotate: {
            x: 0, y: 0, degrees: 270
        },
        x: -50, y: 10 //or whatever to fit (you could calculate these)..
    });
    text.show(true);

यह IE6 + और सभी आधुनिक ब्राउज़रों में काम करेगा, हालांकि, दुर्भाग्य से मुझे लगता है कि आपको कम से कम FF3.0 की आवश्यकता है।

Comments

IE6 + और सभी आधुनिक ब्राउज़रों के बीच के अंतर को प्यार करना - यह पढ़ता है जैसे कि आप कह रहे हैं IE का कोई भी संस्करण आधुनिक नहीं है :)

— ClarkeyBoy

@ClarkeyBoy मैं कहूंगा कि केवल IE10 अन्य ब्राउज़रों के साथ गति करने के लिए लगभग है, और केवल इसलिए कि मजबूर gpu प्रतिपादन और ग्रिड लेआउट। आप वास्तव में IE को एक आधुनिक ब्राउज़र को शांत नहीं कर सकते, क्योंकि यह x3-x10 बार धीमी गति से और फिर हर दूसरे ब्राउज़र को अपडेट करता है।

— 23

सर्वश्रेष्ठ शर्त एक एसवीजी फ़ाइल या इस जेएस का उपयोग करना है, क्योंकि आप पा सकते हैं कि सीएसएस ट्रांसफॉर्म संपत्ति का उपयोग करना आपके जिम्मेदार डिज़ाइन किए गए पृष्ठों के साथ संगत नहीं हो सकता है।

— b01

Answer 7

यदि आप बूटस्ट्रैप 3 का उपयोग करते हैं, तो आप इसका एक मिश्रण का उपयोग कर सकते हैं:

.rotate(degrees);

उदाहरण:

.rotate(-90deg);

Comments

अभी भी काम करता है, लेकिन ध्यान दें कि: हमारे ग्रंटफाइल में ऑटोप्रेक्सिफ़र की शुरुआत के कारण सभी विक्रेता मिश्रण v3.2.0 के रूप में पदावनत किए जाते हैं। उन्हें v4 में हटा दिया जाएगा।

— यिशिज़

Answer 8

मेरा समाधान जो क्रोम, फ़ायरफ़ॉक्स, IE9, IE10 पर काम करेगा (अपनी आवश्यकता के अनुसार डिग्री बदलें):

.rotate-text {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: none; /*Mandatory for IE9 to show the vertical text correctly*/      
}

Answer 9

यदि सीएसएस लेखन-मोड : sideways-lrआप जो पसंद करते हैं, और आप क्रोमियम / क्रोम आधारित ब्राउज़र में चलाते हैं। आप कोशिश कर सकते हैं

{
  writing-mode: vertical-rl; 
  transform: rotate(180deg);
}

इसलिए सभी आधुनिक ब्राउज़र अब इसका समर्थन करते हैं।

संदर्भ: https://bugs.chromium.org/p/chromium/issues/detail?id=680332##4