উল্লম্ব পাঠের দিকনির্দেশ

106

আমি একটি উল্লম্ব দিক যেতে হচ্ছে আমরা MS-শব্দ টেবিল না করতে পারেন কিন্তু এতদূর আমি শুধু কাজ করতে সক্ষম হয়েছে টেক্সট চেষ্টা করছি এই ... যা আমি সুখী নই সঙ্গে এটি কারণ একটি বক্স আবর্তিত ... আইএসএন ' প্রকৃত উল্লম্ব দিকের পাঠ্যের কোনও উপায় নেই?

আমি ডেমোতে কেবল ঘূর্ণনটি 305 ডিগ্রিতে সেট করে যা পাঠ্যটিকে উল্লম্ব করে না। 270degউইল তবে আমি কেবল ঘোরানোর জন্য ডেমো তৈরি করেছি।

html  css  text  vertical-alignment 
— চন্দ্র
সূত্র
হ্যালো, আপনি মানের উন্নতি করতে কোনও অপ্রচলিত সিনট্যাক্সের সাথে মানিয়ে নিতে আপনার গৃহীত উত্তরটি পর্যালোচনা করতে পারেন। আপনার প্রশ্নটিকে সদৃশ হিসাবে দেখা হচ্ছে
— জি-সিরিলাস

উত্তর:

107

বিকল্প পদ্ধতি: http://www.thecssninja.com/css/real-text-rotation-with-css 

p { writing-mode: tb-rl; }
— রাজহাঁস
সূত্র
2
আমি এটির সন্ধান করতে পেরেছিলাম: উত্পন্নকোন্ট.আর / পোস্ট / 45384206019 / রাইটিং- মোডস । যদিও এটি খুব কৃপণ মনে হয়।
— ক্রিস্টাল মিলার
7
@ ক্রিস্টালমিলার এবং বিটিডাব্লু, ডাব্লু 3 স্কুলগুলি ভাল সহায়ক হতে পারে তবে এটি উত্স / মূল ডকুমেন্টেশন নয় (সুতরাং এটি কিছু জিনিস মিস করতে পারে), "অফিসিয়াল" ডাব্লু 3.org বা নিকটতম, আরও মানব-পাঠযোগ্য, এটি
— মোজিলার
এটি ক্রোম, মজিলা এবং আইই প্রান্তে কাজ করে তবে উইন্ডোগুলির জন্য সাফারি নয়।
— কুশলভম
8
tb-rlঅবচয় করা হয়েছে, vertical-rlপরিবর্তে ব্যবহার করুন।
— জেরেড চু
3
দুর্ভাগ্যক্রমে, যদি উল্লম্ব পাঠ্যটি স্ক্রিনের বাম দিকে থাকে তবে বেশিরভাগ রোমান পাঠগুলি নীচে থেকে শীর্ষে পড়ে। এবং তারপর টেক্সটটি নীচে স্ক্রিনের ডানদিকে থাকলে। কিছু মান হ্রাস পেয়েছে, আমরা একক উল্লম্ব-আরএল দিয়ে শেষ করব যা স্ক্রিনের ডানদিকে নীচে থেকে নীচে রয়েছে। বাম দিকের জন্য, আমাদের একটি ট্রান্সফর্ম যুক্ত করতে হবে: ঘোরানো (180deg);
— কির কানোজ
80 
-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;
}
— অমিত
সূত্র
9
সম্পত্তি 'তলদেশ' এর 'অবস্থান' এর সম্পত্তি ছাড়া কোনও মূল্য নেই।
— ক্রিস্টাল মিলার 19
2
আমার -এমএস-ট্রান্সফর্ম যুক্ত করতে হবে: ঘোরানো (90 ডিগ্রি); আইই 11 এ এই কাজটি পেতে
— প্যাট্রিকবাডলি
1
অনুযায়ী developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , writing-mode:tb-rl;অসমর্থিত হয়েছে। writing-mode:vertical-rlপরিবর্তে ব্যবহার করুন!
— স্টেফেন
64

আমি নীচে দেখানো মত একটি প্রকৃত উল্লম্ব পাঠের জন্য এবং এইচটিএমএলে ঘোরানো পাঠ্যটি অনুসন্ধান করছিলাম। সুতরাং আমি নিম্নলিখিত পদ্ধতিটি ব্যবহার করে এটি অর্জন করতে পারি।

এখানে চিত্র বর্ণনা লিখুন এইচটিএমএল: -

<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! হোয়াইটস্পেস সহ ডেমো

আপডেট 2 (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.*/
}

জেএসফিডাল ডেমো এফএফ সামঞ্জস্যপূর্ণ।

— মোহাম্মদ আবদুল মুজিব
সূত্র
আমি কি পাঠ্যটিকে উল্লম্বভাবে কেন্দ্রীভূত করতে পারি?
— মোহাম্মদ সাইফুল্লাহ 16'16
কেন্দ্রটি সারিবদ্ধ করার মাধ্যমে আপনি কী বোঝাতে চেয়েছিলেন তা আমি পুরোপুরি পাইনি, তবে সম্ভবত আপনি কেবল ধারক উপাদানটি .vericaltextকেন্দ্রে প্রান্তিককরণ করতে পারেন ?
— মোহাম্মদ আবদুল মুজিব
1
অবিশ্বাস্য। পরিবর্তে এটি সবুজ টিক দেওয়া উচিত। আশা করি তিনি এখনও এসওতে সক্রিয় থাকায় ওপি এটিকে চিহ্নিত করবে।
— রাহুল
: ডি পুরানো ঠান্ডা উত্তর
— কপিল যাদব
আমার কিছু হট 'এন ফ্রেশও রয়েছে: পি
— মোহাম্মদ আবদুল মুজিব
27

90 ডিগ্রি পাঠ্য ঘোরানোর জন্য:

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

এছাড়াও, এটি প্রদর্শিত হয়: স্প্যান ট্যাগটি প্রদর্শন: ব্লক সেট না করে ঘোরানো যাবে না।

— Jbrown
সূত্র
4
<স্প্যান> সম্ভবত প্রদর্শিত হতে হবে: ব্লক; সঠিকভাবে ঘোরাতে
— ম্লাদেন জঞ্জেটভিক
2
আমি এটি <div> এর মধ্যে বসে << ডিভেল> এ প্রয়োগ করেছি। মনে হচ্ছে এটি সফলভাবে সমস্ত ব্রাউজারে ঘুরছে। ... ... তবে একবার ডিভটি ঘোরার পরে (90 ডিগ্রি) টিডি এর উচ্চতা প্রসারিত করে না।
— ডিএসডিএসএসডিএসডি
11

ফায়ারফক্স ব্যবহারের ক্ষেত্রে একে অপরের নীচে অক্ষরযুক্ত উল্লম্ব পাঠ্যের জন্য:

text-orientation: upright;
writing-mode: vertical-rl;
— ইগি
সূত্র
5

উল্লম্ব (নীচে শীর্ষ) পাঠ্য প্রদর্শন করতে আমরা সহজভাবে ব্যবহার করতে পারি:

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এখানে মজিলা ডক্সে সম্পত্তি সম্পর্কে আরও পড়তে পারি ।

— আবদাল্লাহ ওকশা
সূত্র
4 

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

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

</div>
স্নিপেট প্রসারিত করুন

এখানে চিত্র বর্ণনা লিখুন

— বিশাল সিংহ
সূত্র
হ্যালো এই প্রশ্নের উত্তর দেওয়ার চেষ্টা করার জন্য আপনাকে ধন্যবাদ, আপনি সংক্ষেপে ব্যাখ্যা করতে পারবেন কীভাবে আপনার সমাধান ওপির সমস্যার সমাধান করে?
— জেমস ওয়াং - মনিকা
3

আমি এতে নতুন, এটি আমাকে অনেক সাহায্য করেছে। এটিকে ফিট করার জন্য কেবল প্রস্থ, উচ্চতা, শীর্ষ এবং বাম পরিবর্তন করুন:

.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;
}
— NICK- কে
সূত্র
রূপান্তর-উত্স যা আমার প্রয়োজন!
— xian
আমার বাম ভাসা কি দরকার!
— ক্রিস
2

আপনার মতো ঘূর্ণন, যাবার উপায় - তবে লক্ষ্য করুন যে সমস্ত ব্রাউজারগুলি এটি সমর্থন করে না। যদি আপনি ক্রস ব্রাউজার সমাধান পেতে না চান তবে আপনাকে তার জন্য ছবি তৈরি করতে হবে।

— oezi
সূত্র
2

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 */
}
— Sadee
সূত্র
2

আমি এটির সাথে একটি কার্যনির্বাহী সমাধান পরিচালনা করেছি:

(একটি মধ্যম শ্রেণির ডিভের মধ্যে আমার একটি শিরোনাম রয়েছে)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}
— RVA
সূত্র
2

এখানে কয়েকটি এসভিজি কোডের একটি উদাহরণ যা আমি টেবিলের কলাম শিরোনামে উল্লম্ব পাঠ্যের তিনটি লাইন পেয়েছি। অন্যান্য কোণে কিছুটা টুইট করা সম্ভব। আমি বিশ্বাস করি আজকাল বেশিরভাগ ব্রাউজারগুলি এসভিজি সমর্থন করে।

<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>
— নীল বাউয়ার্স
সূত্র
2

আপনি নীচের সিএসএস বৈশিষ্ট্যগুলির সাথে এটি অর্জন করতে পারেন:

writing-mode: vertical-rl;
text-orientation: upright;
— রাজিথা অলুরি
সূত্র
1

সেরা সমাধান ব্যবহার করা হবে writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

এটি পাঠ্যের রেখাগুলি অনুভূমিকভাবে বা উলম্বভাবে স্থাপন করা হয়েছে এবং যে দিকে অগ্রগতিতে অবরুদ্ধ রয়েছে তা নির্ধারণ করে।

এটিতে ভাল ব্রাউজার সমর্থন রয়েছে, তবে আইই 8-তে কাজ করবে না (আপনি যদি আইই সম্পর্কে যত্নশীল হন) http://caniuse.com/#feat=css-writing-mode

— ভাসিল এনচেভ
সূত্র
1 
<!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>
— স্যাচিন বার্নওয়াল
সূত্র
আপনি ট্রান্সফর্ম পরিবর্তন করতে পারেন: ঘোরান (270 ডিগ্রি); রূপান্তর: ঘোরানো (90deg); প্রয়োজনীয়তা অনুসারে
— সাচীন বার্নওয়াল
1

আপনি চাইলে একটি অ্যালিগমেন্ট চাই 

S
T
A
R
T

তারপরে https://www.w3.org/ ইন্টারন্যাশনাল / আর্টিকেলস / রুটিকাল- টেক্সট /# 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>
স্নিপেট প্রসারিত করুন

নোট করুন আমার উদাহরণে হিন্দিটির একটি উচ্চারণ রয়েছে এবং এটি একটি একক চরিত্র হিসাবে উপস্থাপিত হবে। এই সমাধানটির সাথে আমিই কেবল এই সমস্যার মুখোমুখি হয়েছি।

— বেদা শ্মিড
সূত্র
1

বিকাশকারী.মোজিলা.অর্গ থেকে

পাঠ্য-অভিমুখীকরণ 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;
— ইউসুফ আলতাফ
সূত্র
0

নিম্নোক্ত স্নিপিটটি উল্লম্ব পাঠ্য ব্যবহার করতে আপনি শব্দ-মোড়ানো: বিরতি-শব্দ ব্যবহার করতে পারেন

এইচটিএমএল:

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

CSS:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}
— হরি প্রসন্ধ
সূত্র
0 

<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>

— Ayyappa
সূত্র
0 
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) - অপেরা ব্রাউজার (সমর্থিত নয়) - অ্যান্ড্রয়েড ব্রাউজার (44)

— সালেহীন
সূত্র
0

একটি এসভিজি ফাইল ব্যবহার করে দেখুন, এটির চেয়ে আরও ভাল ব্রাউজারের সামঞ্জস্য রয়েছে এবং এটি আপনার প্রতিক্রিয়াশীল ডিজাইনগুলি ভঙ্গ করবে না।

আমি সিএসএস রূপান্তর চেষ্টা করেছিলাম, এবং ট্রান্সফর্ম-উত্স নিয়ে অনেক সমস্যায় পড়েছি; এবং একটি এসভিজি ফাইল দিয়ে শেষ হয়েছে। এটি 10 ​​মিনিটের মতো সময় নিয়েছে এবং আমি এটি CSS এর সাথেও কিছুটা নিয়ন্ত্রণ করতে পারি।

আপনার কাছে অ্যাডোব ইলাস্ট্রেটর না থাকলে আপনি এসভিজি তৈরি করতে ইনস্কেপ ব্যবহার করতে পারেন।

— B01
সূত্র
0

আপনি এই মত চেষ্টা করতে পারেন

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
— বাবলু আহমেদ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.