আমি কি সিএসএস ব্যবহার করে পাঠ্য প্রসারিত করতে পারি?

Question

আমি কি সিএসএসে পাঠ্য প্রসারিত করতে পারি? আমি ফন্টটি বড় হতে চাই না, কারণ এটি এটির পাশের ছোট পাঠ্যের চেয়ে আরও সাহসী প্রদর্শিত হয়। আমি কেবল পাঠ্যটি উল্লম্বভাবে প্রসারিত করতে চাই যাতে এটি একরকম বিকৃত হয়। এটি এক ডিভের মধ্যে থাকবে এবং এর পরে সাধারণ পাঠ্যটি অন্য ডিভে থাকবে। কিভাবে আমি এটি করতে পারব?

Comments

অনুভূমিক ডান জন্য thats? উল্লম্ব কি?

— ম্যাথিউ 905

আপনি এটি কি জন্য ব্যবহার করার চেষ্টা করছেন? পাঠ্য মাত্র কয়েক লাইন? আপনি জাভাস্ক্রিপ্ট ব্যবহার করে খুশি?

— ত্রিশডট

Answer 1

হ্যাঁ, আপনি আসলে সিএসএস 2 ডি ট্রান্সফর্মের মাধ্যমে করতে পারেন। এটি IE9 + সহ প্রায় সমস্ত আধুনিক ব্রাউজারগুলিতে সমর্থিত। এখানে একটি উদাহরণ।

এইচটিএমএল

<p>I feel like <span class="stretch">stretching</span>.</p>

সিএসএস

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

টিপ: পাঠ্যের সংঘর্ষ রোধ করতে আপনার প্রসারিত পাঠ্যে মার্জিন যুক্ত করতে হতে পারে।

Comments

এটি কীভাবে সাবমিট বাটন পাঠ্যে প্রয়োগ করা যেতে পারে? (পাঠ্য, বোতাম নয়)

— ই

কেবল <p> </p> ট্যাগগুলিকে <বাটন> </ বাটন> এ পরিবর্তন করুন ... শৈলীটি "প্রসারিত" শ্রেণীর সাথে স্প্যান ট্যাগগুলিতে যে কোনও কিছুকে প্রভাবিত করবে।

— টিমোথি পেরেজ

আপনি ট্রান্সফর্ম-অরিজিনালটি ডিফল্ট হিসাবে এটি যুক্ত করতে চান এটি কেন্দ্র থেকে স্কেল করবে। রূপান্তর-উত্স: বাম কেন্দ্র; বিকাশকারী.মোজিলা.আর.ইন-

— রিক

আপনি পিছনে অক্ষ আছে। প্রশ্নকারী অনুভূমিকভাবে নয়, উলম্বভাবে পাঠ্য প্রসারিত করতে চায় ।

— BoltClock

এটি দুর্দান্ত, তবে দুর্ভাগ্যক্রমে এটি একটি সিউডোলেসেক্টর যেমন :: প্রথম-অক্ষরের সাথে কাজ করে না।

— সাইমন

Answer 2

আমি পাঠ্যের অনুভূমিক প্রসারের জন্য উত্তর দেব, যেহেতু উল্লম্বটি সহজ অংশ - কেবল "ট্রান্সফর্ম: স্কেলওয়াই ()" ব্যবহার করুন

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

লেটার-স্পেসিং কেবল অক্ষরগুলির মধ্যে স্থান জুড়ে দেয়, কিছুই প্রসারিত করে না, তবে এটি কিছুটা আপেক্ষিক

ইনলাইন-ব্লক কারণ ইনলাইন উপাদানগুলি খুব সীমাবদ্ধ এবং নীচের কোডটি অন্যথায় কাজ করবে না

এখন সংমিশ্রণ যা পার্থক্য তৈরি করে

আমরা যে আকারটি চাই তা পেতে ফন্ট-আকার - পাঠ্যটি তার দৈর্ঘ্যের হওয়া উচিত এবং তার আগে এবং পরে পাঠ্যটি সামনে প্রদর্শিত হবে (স্কেলএক্স কেবল প্রদর্শন করার জন্য রয়েছে, ব্রাউজারটি এখনও উপাদানটি দেখে অন্যান্য উপাদানগুলির অবস্থান নির্ধারণের সময় এর আসল আকারে)।

পাঠ্যের উচ্চতা হ্রাস করতে স্কেলওয়াই যাতে এটি পাশের পাঠ্যের মতো হয়।

লাইনের শীর্ষ থেকে পাঠ্য স্কেল তৈরি করতে রূপান্তর-উত্স origin

মার্জিন-নীচের অংশটি একটি নেতিবাচক মানতে সেট করুন, যাতে পরবর্তী লাইনটি খুব নীচে না যায় - প্রায়শই শতাংশ, যাতে আমরা লাইন-উচ্চতার সম্পত্তিটি পরিবর্তন করব না। অন্যান্য উচ্চতায় ভাসমান থেকে পাঠানোর আগে বা পরে পাঠ্যটিকে আটকাতে শীর্ষে উল্লম্ব-সারিবদ্ধ সেট করুন (যেহেতু প্রসারিত পাঠ্যটির আসল আকার 32px থাকে)

- সাধারণ স্প্যান উপাদানটির একটি হরফ আকার রয়েছে কেবলমাত্র একটি রেফারেন্স হিসাবে।

প্রসারিত কারণে সৃষ্ট পাঠ্যের সাহসীতা রোধ করার জন্য প্রশ্নটি জিজ্ঞাসা করার একটি উপায় জিজ্ঞাসা করেছিল এবং আমি এখনও একটিটি দেয়নি, তবে ফন্ট-ওজনের সম্পত্তিটির স্বাভাবিক এবং সাহসের চেয়ে আরও বেশি মান রয়েছে ।

আমি জানি, আপনি এটি দেখতে পাচ্ছেন না তবে আপনি যদি উপযুক্ত ফন্টগুলি অনুসন্ধান করেন তবে আপনি আরও মান ব্যবহার করতে পারেন।

Answer 3

প্রযুক্তিগতভাবে, না। তবে আপনি যা করতে পারেন তা হ'ল একটি ফন্টের আকার ব্যবহার করুন যা আপনি প্রসারিত ফন্টটি পছন্দ করতে চান এবং তারপরে এটি অনুভূমিকভাবে ঘনীভূত করেন font-stretch।

Answer 4

"মেনু" এর মতো সংক্ষিপ্ত পাঠগুলির জন্য আমি যেভাবে ভাবতে পারি তা হ'ল প্রতিটি অক্ষর একটি স্প্যানে রেখে তার পরে একটি ধারককে ন্যায়সঙ্গত করা। এটার মত:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

এবং তারপরে সিএসএস:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

Answer 5

সিএসএস ফন্ট-প্রসারিত এখন সমস্ত বড় ব্রাউজারগুলিতে সমর্থিত (আইওএস সাফারি এবং অপেরা মিনি বাদে)। একটি সাধারণ ফন্ট-পরিবার খুঁজে পাওয়া সহজ নয় যা প্রসারিত ফন্টকে সমর্থন করে, তবে কনডেন্সিং সমর্থন করে এমন ফন্টগুলি খুঁজে পাওয়া সহজ, উদাহরণস্বরূপ:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Comments

কৌতূহল যে কেন এটি একটি নিচে ভোট পেয়েছে, আমি আসলে এটি সরু স্ক্রিনে টেক্সট ফিট করার দ্রুত উপায় হিসাবে নিয়মিতভাবে ব্যবহার করি: এটি আরিয়াল ফন্টের সাথে দুর্দান্ত কাজ করে

— সিমেন্টজেন

Answer 6

যখন ডিজাইনার আমার উপর ফন্ট প্রসারিত করেন তখন সর্বদা এই পৃষ্ঠায় ফিরে আসবেন। গৃহীত সমাধানটি দুর্দান্ত কাজ করে তবে আমি প্রায়শই মার্জিনের সাথে ইস্যুগুলিতে চলে যাই।

আপনি যদি সমস্যাগুলির মধ্যে চলে আসেন তবে প্রস্থের পরিবর্তে উচ্চতার পরিবর্তিত রূপটি ব্যবহার করার পরামর্শ দেবেন, আমার বর্তমান প্রকল্পে এটি আমার জন্য একটি জীবন সুরক্ষিত ছিল।

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}