সিএসএস ক্রস ব্রাউজারের সাহায্যে আমি উল্লম্ব পাঠটি কীভাবে আঁকতে পারি?

Question

ক্রস ব্রাউজার (> = আই 6,> = ফায়ারফক্স 2, ক্রোম, সাফারি বা অপেরার কোনও সংস্করণ) সমর্থন সহ আমি একক পাঠ্যকে 90 ডিগ্রি ঘোরানো চাই want কিভাবে এই কাজ করা যেতে পারে?

Comments

ক্রস সামঞ্জস্যের সাথে আপনি ব্যবহার করতে পারেন এমন কোনও খাঁটি সিএসএস নেই। আমি যা পেয়েছি তা সবই আছে। আপনি একটি ইমেজ সঙ্গে ভাল।

— রবার্ট কে

উল্লম্ব পাঠ্য ক্রসব্রোজার এত কঠিন নয়। Dns4.nl এ এমন একটি সমাধান রয়েছে যা এমনকি অপেরাতেও কাজ করে। আমি এটি সমস্ত সংস্করণ অর্থাৎ মোজিলা এবং সাফারি (মুকুট) দিয়ে পরীক্ষা করেছি tested লিঙ্কটি হ'ল: dns4.nl/pagina/html_code/vertikale_tekst.html । xkcd150 এর জন্য মন্তব্য :> সমস্যা হ'ল এটি ক্যানভাস উপাদানটির উপর নির্ভর করে। - xkcd150 সেপ্টেম্বর 20 এ 10:13 এ, পদ্ধতিটি ক্যানভাস উপাদানটির উপর নির্ভর করছে না।

এখানে একটি টিউটোরিয়াল রয়েছে যা কীভাবে আই.ই.তে (আপনার সমস্যার সমাধান সহ) সমস্ত ধরণের পাঠ্য রূপান্তর করতে পারে তা ব্যাখ্যা করে: :) useragentman.com/blog/2010/03/09/… আশা করি এটি সহায়তা করে!

— জুয়ানমা গেরেরো

আমি যে কৌশলটি ব্যবহার করেছি তার একটি ব্রেকডাউন এখানে দেওয়া হয়েছে: স্কটগেল.com

এই পৃষ্ঠায় প্রদত্ত নির্দেশাবলী অনুসরণ করে আমি সাফল্যের সাথে ঘোরতে পারি তবে আমি পৃষ্ঠাটি মুদ্রণ করতে পারিনি। পাঠ্যটি পিছনে মুদ্রিত হয়। এই ওয়েবসাইটটি আমার জন্য খুব দরকারী ছিল: সেভেনওয়্যারস

— নাহুয়েল

Answer 1

সাম্প্রতিক তথ্যের সাথে এই উত্তরটি আপডেট করুন ( সিএসএস ট্রিকস থেকে )। ফিল্টার বাস্তবায়ন নির্দেশ করার জন্য ম্যাট এবং ডগলাসকে কুডোস।

.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);
}

পুরানো উত্তর:

এফএফ 3.5 বা সাফারি / ওয়েবকিট 3.1 এর জন্য, দেখুন: -মোজ-ট্রান্সফর্ম (এবং -ওয়েবেকিট -ট্রান্সফর্ম)। আইইয়ের একটি ম্যাট্রিক্স ফিল্টার রয়েছে (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;) এই কাজটি করতে আমার বেশ ভাল সমস্যা হয়েছিল, আমি আমার ডোম কাঠামোটি পরিবর্তন করতে এবং নেতিবাচক মার্জিনের সাথে ফ্যাদ করে শেষ করেছি। একটি আইই সংস্করণ যা ব্যবহার করা সহজ তবে পৃষ্ঠাটি মুদ্রিত হওয়ার পরে সঠিক দেখাচ্ছে না: রাইটিং-মোড: টিবি-আরএল; ফিল্টার: flipv fliph;

— আরএমরিসি

মাইক্রোসফ্ট "ফিল্টার: প্রগতি: ডিএক্সআইমেজট্রান্সফর্ম। মাইক্রোসফট.ব্যাসিক আইমেজ (রোটেশন = 3);"

— ম্যাট

দুর্ভাগ্যক্রমে, IE9 (স্ট্যান্ডার্ড মোডে!) -Ms- ট্রান্সফর্ম- * স্টাইল এবং ফিল্টার উভয়ই প্রয়োগ করে । সামঞ্জস্যতা দর্শনে, এটি কেবলমাত্র ফিল্টার প্রয়োগ করে।

— রোমেল্ক

নিশ্চিত হয়ে নিন যে আপনার পাঠ্যটি একটি ব্লক উপাদান, অর্থাৎ প্রদর্শন ব্যবহার করুন: ইনলাইন-ব্লক বা অনুরূপ

— জেমস ওয়েস্টগেট

আইই 8 এবং আই 9 ধার্মিকতার জন্য এখানে কিছু ফিল্টার রয়েছে। প্রথমটি আই 8, দ্বিতীয়টি আই 8 মানক মোড, এবং # 3 আই 9 + এর ফিল্টারটি সরিয়ে দেয়। আরআর, আমি আমার সিএসএস হ্যাকগুলি ফিল্টারিং বন্ধ করতে স্ট্যাকওভারফ্লো মন্তব্য পেতে পারি না, তাই jsfiddle.net/GrPyj/9 দেখুন

— জাস্টিন গ্র্যান্ট

Answer 2

আমি একটি পৃষ্ঠায় উল্লম্ব পাঠ্য লিখতে নিম্নলিখিত কোডটি ব্যবহার করছি। ফায়ারফক্স 3.5+, ওয়েবকিট, অপেরা 10.5+ এবং আইই

.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

Chrome 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 ডিগ্রি ঘোরানোর পরামর্শ দেব

— গডব্ল্যাসস্ট্রাবাবেরি

Answer 5

আমি এটি http://snook.ca/archives/html_and_css/css-text-rotation- এর থেকে গ্রহণ করেছি :

<শৈলী>
    .Rotate-90
    {
        প্রদর্শন ব্লক;
        অবস্থান: পরম;
        ডান: -5px;
        শীর্ষ: 15px;
        -webkit- রূপান্তর: ঘোরান (-90deg);
        -মোজ-ট্রান্সফর্ম: ঘোরান (-90deg);
    }
</ শৈলী>
<! - [যদি আইই]] হয়
    <শৈলী>
        .রোটেট -৯০ {
            ফিল্টার: অগ্রণী: DXImageTransform.Mic Microsoft.BasicImage (ঘূর্ণন = 3);
            ডানে: -15px; শীর্ষ: 5px;
        }
    </ শৈলী>
    <[Endif] ->

Answer 6

খাঁটি সিএসএসে এটি করার চেষ্টা করতে আমার সমস্যা হয়েছে - ফন্টের উপর নির্ভর করে এটি কিছুটা আবর্জনা দেখতে পারে। বিকল্প হিসাবে আপনি এটি করতে এসভিজি / ভিএমএল ব্যবহার করতে পারেন। এমন লাইব্রেরি রয়েছে যা এটিকে সহজেই ব্রাউজারটি অতিক্রম করতে সহায়তা করে যেমন রাফেল এবং এক্সটজেএস । 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);

এটি আই 6+ এবং সমস্ত আধুনিক ব্রাউজারগুলিতে কাজ করবে, তবে দুর্ভাগ্যক্রমে আমি মনে করি আপনার কমপক্ষে FF3.0 প্রয়োজন need

Comments

আই 6 + এবং সমস্ত আধুনিক ব্রাউজারের মধ্যে পার্থক্যকে ভালবাসা - এটি এমনভাবে পড়ে যে আপনি

— আইআই

@ ক্লারকিবয় আমি বলব যে কেবলমাত্র আইই 10 অন্যান্য ব্রাউজারগুলির সাথে দ্রুত গতিতে চলেছে এবং কেবলমাত্র জিপিইউ রেন্ডারিং এবং গ্রিড লেআউট করার কারণে। আপনি প্রকৃতপক্ষে IE কে আধুনিক ব্রাউজার হিসাবে কল করতে পারবেন না, কারণ এটি অন্যান্য ব্রাউজারের চেয়ে ধীরে ধীরে x3-x10 বার আপডেট করে।

— skmasq

সেরা বাজি হ'ল একটি এসভিজি ফাইল বা এই জেএস ব্যবহার করা, কারণ আপনি দেখতে পাচ্ছেন যে CSS রূপান্তর সম্পত্তিটি আপনার প্রতিক্রিয়াশীলভাবে ডিজাইন করা পৃষ্ঠাগুলির সাথে সামঞ্জস্য হতে পারে না।

— বি01

Answer 7

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে আপনি এর একটির মিশ্রণ ব্যবহার করতে পারেন:

.rotate(degrees);

উদাহরণ:

.rotate(-90deg);

Comments

তবুও কাজ করে তবে লক্ষ্য করুন যে: আমাদের গ্রান্টফাইলে অটোপ্রিফিক্সার প্রবর্তনের কারণে সমস্ত বিক্রেতা মিক্সিনগুলি v3.2.0 হিসাবে অবহিত করা হয়েছে। সেগুলি v4-এ সরানো হবে।

— ইশাইজ

Answer 8

আমার সমাধান যা ক্রোম, ফায়ারফক্স, আই 9, আই 10 (আপনার প্রয়োজনীয়তা অনুযায়ী ডিগ্রি পরিবর্তন করুন) এ কাজ করবে:

.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=680331#c4