कार्यक्षेत्र पाठ दिशा

Question

मैं एक ऊर्ध्वाधर दिशा में जाने के लिए पाठ की कोशिश कर रहा हूं जैसे कि हम एमएस-वर्ड तालिकाओं में कर सकते हैं, लेकिन अभी तक मैं केवल यह करने में सक्षम रहा हूं ... जो कि मैं खुश नहीं हूं क्योंकि यह एक बॉक्स घुमाया गया है ... Isn ' टी वहाँ वास्तविक ऊर्ध्वाधर दिशा पाठ के लिए एक रास्ता है?

मैंने केवल डेमो में 305 डिग्री तक रोटेशन सेट किया जो पाठ को लंबवत नहीं बनाता है। 270degहोगा, लेकिन मैंने केवल रोटेशन दिखाने के लिए डेमो बनाया।

Comments

नमस्कार, क्या आप गुणवत्ता में सुधार के लिए एक अप्रचलित वाक्यविन्यास के साथ फिट होने के लिए अपने स्वीकृत उत्तर की समीक्षा कर सकते हैं। आपके प्रश्न को एक डुप्लिकेट के रूप में देखा जाता है,

— G-Cyrillus

Answer 1

वैकल्पिक दृष्टिकोण: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

Comments

मैं इसे ढूंढने में सक्षम था: जनरेट किया गया ।.org / post / 45384206019 / writing-modes । हालांकि यह इतना हैकिंग लगता है।

— क्रिस्टल मिलर

@CrystalMiller और BTW, w3schools एक अच्छे सहायक हो सकते हैं, लेकिन यह स्रोत / मूल दस्तावेज नहीं है (इसलिए यह कुछ चीजों को याद कर सकता है), "आधिकारिक" w3.org है, या निकटतम, अधिक मानव-पठनीय है। mozilla का डेवलपर नेटवर्क है - "MDN" - developer.mozilla.org

— jave.web

यह क्रोम, मोज़िला और IE एज में काम करता है लेकिन विंडोज़ के लिए सफारी नहीं है।

— कुशाल्वम

tb-rlपदावनत किया जाता है, कृपया vertical-rlइसके बजाय उपयोग करें ।

— जारेड चू

दुख की बात है कि यदि ऊर्ध्वाधर पाठ स्क्रीन के बाईं ओर है, तो अधिकांश रोमन पाठ नीचे से ऊपर तक पढ़े जाते हैं। और फिर ऊपर से नीचे अगर पाठ स्क्रीन के दाईं ओर है। कुछ मूल्यों को हटाए जाने के बाद, हम एकमात्र ऊर्ध्वाधर-आरएल के साथ समाप्त होते हैं जो स्क्रीन के दाईं ओर ऊपर से नीचे तक है। बाईं ओर के लिए, हमें एक ट्रांसफ़ॉर्म जोड़ना होगा: रोटेट (180 डीजी);

— किरो कानोस

Answer 2

-webkit-transform: rotate(90deg);

अन्य उत्तर सही हैं लेकिन उन्होंने कुछ संरेखण समस्याओं का नेतृत्व किया। अलग-अलग चीजों की कोशिश करने पर इस सीएसएस पीस कोड ने मेरे लिए पूरी तरह से काम किया।

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

Comments

'स्थिति' की संपत्ति के बिना संपत्ति 'नीचे' का कोई मूल्य नहीं है।

— क्रिस्टल मिलर

मुझे जोड़ने-एमएमएस-ट्रांसफॉर्मेशन की जरूरत थी: रोटेट (90 डीजी); IE11 में यह काम पाने के लिए

— patrickbadley

developer.mozilla.org/en-US/docs/Web/CSS/writing-mode के अनुसार , writing-mode:tb-rl;पदावनत किया जाता है। writing-mode:vertical-rlइसके बजाय का उपयोग करें !

— स्टीफन

Answer 3

मैं एक वास्तविक ऊर्ध्वाधर पाठ की खोज कर रहा था न कि HTML में घुमाया गया पाठ जैसा कि नीचे दिखाया गया है। तो मैं निम्नलिखित विधि का उपयोग करके इसे प्राप्त कर सकता था।

एचटीएमएल: -

<p class="vericaltext">
Hi This is Vertical Text!
</p>

सीएसएस: -

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! डेमो।

अद्यतन: - यदि आपको व्हाट्सएप को प्रदर्शित करने की आवश्यकता है , तो निम्नलिखित संपत्ति को अपने सीएसएस में जोड़ें।

white-space: pre;

तो, सीएसएस वर्ग होगा

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! व्हॉट्सएप के साथ डेमो

अपडेट २ (28-जून -2015)

चूंकि white-space: pre;फ़ायरफ़ॉक्स पर (इस विशिष्ट उपयोग के लिए) काम नहीं करता है (अब तक), बस उस लाइन को बदल दें

white-space: pre-wrap;

तो, सीएसएस वर्ग होगा

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

JsFiddle डेमो एफएफ संगत।

Comments

क्या मैं टेक्स्ट को लंबवत केंद्र में संरेखित कर सकता हूं?

— मोहम्मद सैफुल्लाह

केंद्र को संरेखित करने से आपका क्या तात्पर्य है, लेकिन शायद आप कंटेनर तत्व .vericaltextको केंद्र में संरेखित कर सकते हैं?

— मोहम्मद अब्दुल मुजीब

अतुल्य। इसके स्थान पर हरे रंग का टीका लगाना चाहिए। उम्मीद है कि ओपी इसे चिह्नित करेगा क्योंकि वह अभी भी एसओ पर सक्रिय है।

— राहुल

: D पुराना ठंडा उत्तर

— कपिल यादव

मेरे पास कुछ गर्म 'एन ताजा' भी हैं: पी

— मोहम्मद अब्दुल मुजीब

Answer 4

पाठ 90 डिग्री घूमने के लिए:

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

इसके अलावा, ऐसा प्रतीत होता है कि स्पान टैग को प्रदर्शित किए बिना घुमाया नहीं जा सकता है: ब्लॉक।

Comments

<span> संभवतः प्रदर्शन के साथ रहने की आवश्यकता है: ब्लॉक; ठीक से घूमने के लिए

— Mladen Janjetovic

मैंने इसे एक <div> पर लागू किया जो <td> के अंदर बैठता है। यह सभी ब्राउज़रों में सफलतापूर्वक घुमाने के लिए लगता है। ... ... लेकिन, एक बार div (90 डिग्री) घूमता है, td अपनी ऊंचाई का विस्तार नहीं करता है।

— dsdsdsdsd

Answer 5

फ़ायरफ़ॉक्स उपयोग में अक्षरों के नीचे एक के साथ ऊर्ध्वाधर पाठ के लिए:

text-orientation: upright;
writing-mode: vertical-rl;

Answer 6

प्रयोग करके देखें:

writing-mode: lr-tb;

Answer 7

पाठ को ऊर्ध्वाधर में दिखाने के लिए (नीचे-ऊपर) हम बस उपयोग कर सकते हैं:

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

ध्यान दें कि हम इसे ब्राउज़र संगतता सुनिश्चित करने के लिए जोड़ सकते हैं:

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

हम मोज़िला डॉक्सwriting-mode पर संपत्ति के बारे में और भी पढ़ सकते हैं ।

Answer 8

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

Comments

नमस्कार, इस प्रश्न का उत्तर देने के लिए धन्यवाद, क्या आप संक्षेप में बता सकते हैं कि आपका समाधान ओपी की समस्या का समाधान कैसे करता है?

— जेम्स वोंग - मोनिका

Answer 9

मैं इसमें नया हूं, इससे मुझे बहुत मदद मिली। इसे बदलने के लिए बस चौड़ाई, ऊँचाई, ऊपर और बाएँ बदलें:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

आप यहां भी जा सकते हैं और इसे करने का दूसरा तरीका भी देख सकते हैं। लेखक इसे इस तरह से करता है:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

Comments

परिवर्तन-उत्पत्ति की मुझे क्या आवश्यकता है!

— xtian

नाव छोड़ दिया है कि मैं क्या जरूरत है!

— क्रिस

Answer 10

रोटेशन, जैसे आपने किया, जाने का तरीका है - लेकिन ध्यान दें कि सभी ब्राउज़र इसका समर्थन नहीं करते हैं। यदि आप क्रॉस-ब्राउज़र समाधान प्राप्त नहीं करना चाहते हैं, तो आपको उसके लिए चित्र बनाने होंगे।

Answer 11

CSS3 ट्रांसफ़ॉर्म प्रॉपर्टी का उपयोग कर सकते हैं

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Answer 12

वर्ग जोड़ें

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

}

मैं इसे हर रोज बहुत उपयोग करता हूं और इसके साथ कोई समस्या नहीं थी।

https://css-tricks.com/snippets/css/text-rotation/

Answer 13

मैंने इसके साथ एक कार्यशील समाधान का प्रबंधन किया है:

(मैं एक मध्यमवर्गीय वर्ग विभाजन के भीतर एक शीर्षक है)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

Answer 14

यहाँ कुछ एसवीजी कोड का एक उदाहरण दिया गया है जिसका उपयोग मैंने टेबुल कॉलम हेडिंग में वर्टिकल टेक्स्ट की तीन लाइनें प्राप्त करने के लिए किया है। अन्य कोणों को थोड़ा ट्विकिंग के साथ संभव है। मेरा मानना ​​है कि अधिकांश ब्राउज़र इन दिनों एसवीजी का समर्थन करते हैं।

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

Answer 15

आप नीचे दिए गए CSS गुणों के साथ इसे प्राप्त कर सकते हैं:

writing-mode: vertical-rl;
text-orientation: upright;

Answer 16

सबसे अच्छा समाधान यह होगा कि https://developer.mozilla.org/en-US/docs/Web/CSS/writing-odeode का उपयोग किया जाएwriting-mode writing-mode: vertical-rl;

यह परिभाषित करता है कि क्या पाठ की पंक्तियों को क्षैतिज या लंबवत रूप से निर्धारित किया गया है और जिस दिशा में प्रगति अवरुद्ध है।

इसके पास अच्छा ब्राउज़र समर्थन है, लेकिन IE8 पर काम नहीं करेगा (यदि आप IE के बारे में परवाह करते हैं) http://caniuse.com/#feat=css-writing-mode

Answer 17

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
}

Answer 18

<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>

Comments

आप परिवर्तन को बदल सकते हैं: घुमाएं (270deg); बदलने के लिए: घुमाएँ (90 डिग्री); आवश्यकताओं के अनुसार

— सैचिन बर्नवल

Answer 19

यदि आप एक संरेखण की तरह चाहते हैं

S
T
A
R
T

इसके बाद https://www.w3.org/International/articles/vertical-text/#upright-latin पर जाएं

उदाहरण:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

ध्यान दें कि हिंदी में मेरे उदाहरण में एक उच्चारण है और इसे एक ही चरित्र के रूप में प्रस्तुत किया जाएगा। यही एकमात्र मुद्दा है जिसका मैंने इस समाधान के साथ सामना किया।

Answer 20

से developer.mozilla.org

पाठ-अभिविन्यास CSS गुण एक पंक्ति में पाठ वर्णों के उन्मुखीकरण को सेट करता है। यह केवल ऊर्ध्वाधर मोड में पाठ को प्रभावित करता है (जब लेखन-मोड क्षैतिज-टीबी नहीं है)। यह उन भाषाओं के प्रदर्शन को नियंत्रित करने के लिए उपयोगी है जो ऊर्ध्वाधर स्क्रिप्ट का उपयोग करते हैं, और ऊर्ध्वाधर टेबल हेडर बनाने के लिए भी।

writing-mode: vertical-rl;
text-orientation: mixed;

आप यहां सभी सिंटेक्स की समीक्षा भी कर सकते हैं

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

Answer 21

आप स्निपेट के बाद वर्टिकल टेक्स्ट का उपयोग करने के लिए वर्ड-रैप: ब्रेक-वर्ड का उपयोग कर सकते हैं

HTML:

<div class='verticalText mydiv'>Here is your text</div>

सीएसएस:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

Answer 22

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

Answer 23

h1{word-break:break-all;display:block;width:40px;} 

हैलो

नोट: ब्राउज़र समर्थित - IE ब्राउज़र (8,9,10,11) - फ़ायरफ़ॉक्स ब्राउज़र (38,39,40,41,42,43,44) - क्रोम ब्राउज़र (44,45,46,47,48) - सफ़ारी ब्राउज़र (8,9) - ओपेरा ब्राउज़र (समर्थित नहीं) - Android ब्राउज़र (44)

Answer 24

एसवीजी फ़ाइल का उपयोग करने का प्रयास करें, ऐसा लगता है कि बेहतर ब्राउज़र संगतता है, और आपके उत्तरदायी डिज़ाइनों को नहीं तोड़ेंगे।

मैंने सीएसएस को बदलने की कोशिश की, और ट्रांसफॉर्म-मूल के साथ बहुत परेशानी थी; और एक SVG फ़ाइल के साथ जा रहा है। इसमें 10 मिनट का समय लगता था, और मैं इसे सीएसएस के साथ भी नियंत्रित कर सकता था।

यदि आपके पास एडोब इलस्ट्रेटर नहीं है, तो आप एसवीजी बनाने के लिए इंकस्केप का उपयोग कर सकते हैं।

Answer 25

यह भी काम करता है:

transform: rotate(90deg);

Comments

2 साल पहले stackoverflow.com/a/12482721/1549818 पर डुप्लिकेट उत्तर

— grg

Answer 26

आप इस तरह की कोशिश कर सकते हैं

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

Answer 27

यह थोड़ा हैकरी है लेकिन क्रॉस ब्राउज़र समाधान है जिसके लिए सीएसएस की आवश्यकता नहीं है

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>