সিএসএসে সমস্ত পাঠ্য কিভাবে উলম্বভাবে সারিবদ্ধ করবেন?

12

ইস্যু মত নির্দিষ্ট অক্ষর মনে করা হয় g, y, q, ইত্যাদি একটি পুচ্ছ যে ঢালে নীচের দিকে, উলম্ব কেঁদ্রীকরণ জন্য অনুমতি দেয় না আছে। সমস্যাটি প্রদর্শনের জন্য এখানে একটি চিত্র একটি।

সবুজ বাক্সের অক্ষরগুলি মূলত নিখুঁত, কারণ তাদের নীচের দিকে কোনও লেজ নেই। লাল বাক্সে থাকা তারা সমস্যাটি দেখায়।

আমি চাই সমস্ত অক্ষর নিখুঁতভাবে উল্লম্বভাবে কেন্দ্রীভূত হোক। চিত্রটিতে, নিম্নমুখী লেজযুক্ত অক্ষরগুলি উল্লম্বভাবে কেন্দ্রিক নয়। এটি কি পুনরুদ্ধার করা সম্ভব?

সমস্যাটি পুরোপুরি দেখায় এমন ফিজল এখানে ।

.avatar {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
    color: #fff;
}
<div class="avatar">
  <div class="character">W</div>
</div>

<div class="avatar">
  <div class="character">y</div>
</div>
স্নিপেট প্রসারিত করুন

javascript  html  css  vertical-alignment 
— ক্রোন ব্যাগ
সূত্র
1
এটা একটি মজার প্রশ্ন। উত্তরটি এখানে থাকতে পারে: iamvdo.me/en/blog/…
— দ্বিজোহনস্টন
2
এই ক্ষেত্রে আপনাকে কেন্দ্রটি কী তা নির্ধারণ করতে হবে । আমার জন্য y আসলে কেন্দ্রিক এবং এ সম্ভবত না। আসুন আমরা কথা বলি না যখন আমাদের ফন্ট-পরিবার আলাদা হয়, প্রান্তিককরণ আরও খারাপ হয়ে যায়
— তেমনী আফিফ
1
ঠিক এইভাবেই চিঠিগুলি কাজ করে। এগুলি প্রান্তিককরণ করা হয়েছে, কারণ এর vমধ্যে yএবং এর oঅংশটি gমূল অক্ষরের জন্য সর্বনিম্ন পয়েন্ট হিসাবে একই লাইনে রয়েছে। আপনার যুক্তি দিয়ে, Å, Ä, Ö ঠিক A এবং O হিসাবে প্রান্তিক করা হবে তবে তারা হতে পারে না। আপনি যদি এটি সম্পর্কে বিশেষ কিছু করতে চান তবে আপনার এটি জাভাস্ক্রিপ্ট ব্যবহার করে এটি একটি ছোট ক্যাপ কিনা তা যাচাই করতে হবে এবং তারপরে অক্ষরটিকে কয়েকটি অক্ষর পর্যন্ত টানতে হবে।
— রিকার্ড ইলিমি
1
আমি যদি এখানে দরকারী উত্তর আছে আগ্রহী। সমস্যাটি মনে হবে যে এগুলি সত্যই কেন্দ্রিক। অর্থাত। বলুন যে আপনি y এবং g সরাতে পারেন, যদি আপনার ছোট হাতের অক্ষর থাকে তবে কী হবে? কিভাবে প্রদর্শন করা উচিত?
— dwjohnston
2
যে কোনও ফন্ট সম্পাদক এ আপনার ফন্ট খুলুন। আপনি "কেন্দ্রিক" হিসাবে যা দেখছেন তাতে সন্তুষ্ট না হওয়া পর্যন্ত প্রতিটি চরিত্র সম্পাদনা করুন । আপনার ব্র্যান্ডের নতুন ফন্ট-পরিবার হিসাবে সংরক্ষণ করুন এবং ব্যবহার করুন। 15 মিনিটের বেশি গ্রহণ করা উচিত নয়। আমি ক্যানভাস ও কো ব্যবহার করে এসভিজি বা অন্যান্য কৌশল ছাড়া অন্য কোনও বুদ্ধিমান উপায় দেখছি না। তবে আমি এই প্রশ্নটি সম্পর্কে চিন্তা করব।
— রোকো সি। বুলজান

উত্তর:

4

জেএস ব্যবহার করে আমার সমাধানটি এখানে দেওয়া হল। ধারণাটি হ'ল উপাদানটির চিত্রটিকে পিক্সেল হিসাবে পেতে তারপরে প্রতিটি চরিত্রের উপরের এবং নীচের অংশটি সন্ধান করার জন্য এগুলির মধ্য দিয়ে লুপ করুন এবং প্রান্তিককরণ ঠিক করার জন্য একটি অনুবাদ প্রয়োগ করুন। এটি গতিশীল ফন্টের বৈশিষ্ট্যগুলির সাথে কাজ করবে।

কোডটি অনুকূলিত হয় না তবে এটি মূল ধারণাটি হাইলাইট করে:

কোড স্নিপেট দেখান

হালনাগাদ

কোডটির প্রথম অপ্টিমাইজেশন এখানে দেওয়া হল:

var elems = document.querySelectorAll(".avatar");
var k = 0;

for (var i = 0; i < elems.length; i++) {
  domtoimage.toPixelData(elems[i])
    .then(function(im) {
     var l = im.length;
      /* Search for the top limit */
      var t = 0;
      for (var j = 0; j < l; j+=4) {
          if (im[j+1] == 255) { /* Since we know the colors, we can only test the G composant */
            t = Math.ceil((j/4)/125);
            break;
          }
      }
      /* Search the bottom limit*/
      var b = 0;
      for (var j = l - 1; j >= 0; j-=4) {
          if (im[j+1] == 255) {
            b = 125 - Math.ceil((j/4)/125);
            break;
          }
      }
      /* get the difference and apply a translation*/
      elems[k].querySelector('.character').style.transform = "translateY(" + (b - t)/2 + "px)";
      k++;
    });
}
.avatar {
  border-radius: 50%;
  display: inline-flex;
  vertical-align:top;
  justify-content: center;
  align-items: center;
  width: 125px;
  height: 125px;
  font-size: 60px;
  background: 
    linear-gradient(red,red) center/100% 1px no-repeat,
    rgb(81, 75, 93);
  font-family: "Segoe UI";
  margin-bottom: 10px;
}

.character {
  color: #fff;
}
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<div class="avatar">
  <div class="character">W</div>
</div>

<div class="avatar">
  <div class="character">y</div>
</div>

<div class="avatar">
  <div class="character" style="font-size:35px">a</div>
</div>

<div class="avatar">
  <div class="character" style="font-size:25px">2</div>
</div>
<div class="avatar">
  <div class="character">o</div>
</div>
<div class="avatar">
  <div class="character">|</div>
</div>
<div class="avatar">
  <div class="character">@</div>
</div>
<div class="avatar">
  <div class="character">Â</div>
</div>

<div class="avatar">
  <div class="character" style="font-family:arial">Q</div>
</div>
<div class="avatar">
  <div class="character">~</div>
</div>
<div class="avatar">
  <div class="character">8</div>
</div>

<div class="avatar">
  <div class="character">ä</div>
</div>
<div class="avatar">
  <div class="character">ç</div>
</div>

<div class="avatar">
  <div class="character">$</div>
</div>

<div class="avatar">
  <div class="character">></div>
</div>
<div class="avatar">
  <div class="character">%</div>
</div>
স্নিপেট প্রসারিত করুন

আমি এটির জন্য ডোম-টু-ইমেজ প্লাগইন ব্যবহার করছি।

— তেমনি আফিফ
সূত্র
একটি মাইট ধীর-চলমান, তবে এটি এখন পর্যন্ত প্রথম ধারাবাহিকভাবে কাজ করা সমাধান। (প্রযুক্তিগতভাবে কেন্দ্রিক-অদ্ভুত বলে মনে হচ্ছে এমন সতর্কতার সাথে)
— ব্রিলিয়ান্ড
@ ব্রিলিয়ান্ড আমি স্পষ্ট Âকরে দেখিয়েছিলাম যে তাঁর কেন্দ্রিকটি অনুকূল নয় যেমন আমি তাঁর উত্তরে মন্তব্য করেছি;) তিনি সম্ভবত এটি দেখার পরে তার মন পরিবর্তন করবেন এবং ফন্টের কাজ করার
— উপায়টি
এটি দেখতে বেশ ভাল লাগছে। আমি মনে করি আমি এটি ব্যবহার করব, যদি আমি এটি আরও দক্ষ করে তুলতে পারি। বর্তমানে এটি কিছুটা ধীর মনে হচ্ছে।
— ক্রোন ব্যাগ
@ ক্রোনব্যাগ হ্যাঁ আপনি কোডটিতে কাজ করতে পারেন এবং এটি অপ্টিমাইজ করতে পারেন, এর জন্য আরও জায়গা রয়েছে। আমার অনেক বেশি সময় লাগে বলে আমি এটি করিনি এবং এটি আসলে প্রশ্নের উদ্দেশ্য নয়। আমি মূল ধারণাটি ফোকাস করতে চেয়েছিলাম। সম্ভবত উপায় দ্বারা পরে করতে হবে।
— তেমনী আফিফ
@ ক্রোনব্যাগ একটি অপ্টিমাইজেশন যুক্ত করেছে, আমার ধারণাটি আরও দ্রুত।
— তেমনী আফিফ
1

এর থেকে আরও ভাল উত্তর থাকতে পারে তবে এটির একমাত্র উপায় হ'ল ম্যানুয়ালি এটির কোনও একটি কিনা তার উপর নির্ভর করে বিভিন্ন স্টাইল প্রয়োগ করা হয়:

  • বড় অক্ষর
  • একটি লেজ সঙ্গে লোয়ারকেস
  • একটি ডাঁটা সঙ্গে ছোট ছোট
  • দু'জনের সাথে লোয়ারকেস নেই

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

আরও দ্রষ্টব্য যে এই সমাধানটি একাধিক ভাষাগুলিকে সমর্থন করার জন্য কাজ করবে না - কারণ প্রতিটি একক অক্ষর কয়েক ডজন বিভিন্ন চরিত্রের সেটগুলিতে কোন বিভাগের জন্য উপযুক্ত তা নির্ধারণ করতে হবে।

const letters = ['a', 'b', 'y', 'X', 'c', 'y', 'A', 'B', 'Y']; 

function getAdditionalClass(char){
    //To do - fill arrays with the rest of the appropriate letters
    if (['y', 'g'].includes(char)) {
        return "tail"; 
    }
    if (['b', 'd'].includes(char)) {
        return "stalk"; 
    }
    
    if (['a', 'c'].includes(char)) {
        return "small"; 
    }
    
    return "capital"; 
}

letters.forEach(v => {
  const avatar = document.createElement("div"); 
  avatar.className = "avatar"; 
  const character = document.createElement("div");
  character.textContent = v; 
  character.className = `character ${getAdditionalClass(v)}`; 
  
  avatar.appendChild(character); 
  
  const root = document.getElementById("root"); 
  
  root.appendChild(avatar); 
  
});
.avatar {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    transform: translateY(-50%);
    line-height: 100%;
    color: #fff;
}


.small {
    top: 45%; 
}

.stalk {
    top: 50%;
}

.tail {
    top: 41%;
}

.capital {
    top: 50%;
}

#root {
    display: flex; 
    flex-flow: row wrap; 
}
<div id = "root">

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

— dwjohnston
সূত্র
আমি এই জাতীয় কিছু এড়াতে আশা করছিলাম তবে এটির একমাত্র সমাধান হতে পারে। আর কিছু যদি না আসে তবে আমি সম্ভবত এটি ব্যবহার করব। ধন্যবাদ
— ক্রোন ব্যাগ
2
যদি চিঠিটি কোনও ইউনিকোড চিঠি (কোনও বর্ণমালা থেকে) হতে পারে তবে এটি অকার্যকর হয়ে পড়ে।
— ব্রিলিয়ান্ড
আপনি ÂËএবংâë
— তেমনী আফিফ
হ্যাঁ, ভাল পয়েন্ট @ ব্রিলিয়ান এবং আমার ব্যবহারকারীরা তাদের প্রদর্শনের নামের জন্য যে কোনও ইউনিকোড পাঠ্য ব্যবহার করতে সক্ষম হবেন, সুতরাং এই সমাধানটি আরও ভঙ্গুর।
— ক্রোন ব্যাগ
0

এ এক জটিল পরিস্থিতি!

আমি যা বলতে পারি, সেগুলি থেকে দেশীয়ভাবে স্কেলযোগ্য (যেমন %, vwবা এর vhপরিবর্তে মানগুলি pxবা em) তৈরি করা সবচেয়ে কঠিন হবে । আপনার যদি মোবাইল বা ট্যাবলেটে এই চেহারাটি সুন্দর করার প্রয়োজন হয় তবে দয়া করে @mediaব্রেকপয়েন্টগুলি সহ আমার সমাধানটি বিবেচনা করুন ।

আমার সমাধানটি মূলত সনাক্ত করে যে এটি কোনও লেজযুক্ত ছোট হাতের উপাদান রয়েছে এবং লেজটির ক্ষতিপূরণ করতে উচ্চতা অফসেট করার জন্য একটি শ্রেণি যুক্ত করে।

আমার পরীক্ষাকার্যের, এটা প্রদর্শিত না যে কোন অতিরিক্ত হ্যান্ডেলার জন্য প্রয়োজন বোধ করা হয় রাজধানী অক্ষর বা ছোট হাতের অক্ষর একটি পুচ্ছ ছাড়া । আমি ভুল হলে আমাকে সংশোধন করতে দ্বিধা বোধ করবেন।

আপনি যদি এই গোলটির চারপাশে গোলযোগ এবং পরিবর্তন / পরীক্ষা করতে চান তবে একটি জেএসফিডাল রয়েছে iddle

var circles = document.getElementsByClassName('circle');
var tails = ['q', 'y', 'p', 'g', 'j'] ;

Array.from(circles).forEach(render);
  
function render(element) { 		
    if(element.innerText == element.innerText.toLowerCase() &&
    	tails.includes(element.innerText)) {
    	element.className += " scale";
    }
}
.circle {
  height: 150px;
  width: 150px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 150px;
  font-size: 50px;
}

.scale {
  line-height: 135px;
}
<div>
  <div class="circle">W</div>
  <div class="circle">X</div>
</div>
<div>
  <div class="circle">y</div>
  <div class="circle">t</div>
</div>
স্নিপেট প্রসারিত করুন

আমাকে আপনার চিন্তাভাবনা জানাতে দিন এবং যদি আমি কিছু মিস করি। এটির জন্য একটি চূড়ান্ত সমাধান পেতে আপনি শীতল হবেন কারণ আমি নিজেও অতীতে একই রকম সমস্যা পেয়েছি!

— EGC
সূত্র
এটি দ্বিজোহনস্টনের সমাধানের সাথে সাদৃশ্যপূর্ণ বলে মনে হয়, এবং তার মতো একই সমস্যাগুলিরও সাপেক্ষে। তবুও, এটি প্রশংসা করা হয়েছে, এবং আরও আদর্শের কিছু না আসলে আমি এই লাইনের সাথে কিছু নিয়ে যেতে পারি।
— ক্রোন ব্যাগ
আমি মনে করি একটি শেষ অবলম্বন হিসাবে, আপনি পিক্সেল গণনার পথে যেতে পারেন - এখানে দেখা গেছে যার মাধ্যমে আপনি এটির প্রকৃত উচ্চতা পিক্সেলে সনাক্ত করতে পারবেন এবং তারপরে উপযুক্ত অফসেটটি প্রয়োগ করবেন।
— EGC
1
হ্যাঁ, আমি ওপিকে দেওয়া মন্তব্যে সেই ধারণাটি উল্লেখ করেছি। সম্ভবত এটিই যেতে হবে।
— ক্রোন ব্যাগ
আপনার ধারণাটি আবার লক্ষ্য করার জন্য দুঃখিত .. অনেক মন্তব্য, স্পষ্টতই এটি মিস হয়েছে!
— ইসিজি
-1

আপনার সম্ভবত এটির জন্য একটি হেল্পক্লাসের প্রয়োজন হবে, যাতে আপনি বড় হাতের অক্ষরের চেয়ে ছোট হাতের অক্ষরকে আরও অনুবাদ করতে পারেন। একটি সাধারণ স্ক্রিপ্ট সহজেই এই সহায়ক ক্লাসগুলি স্বয়ংক্রিয়ভাবে চালু করতে পারে।

আশা করি এটি আপনার সমস্যার সমাধান করে দেয় :)

.avatar {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    top: 50%;
    line-height: 100%;
    color: #fff;
}
.character-lowercase {
  transform: translateY(-60%);
}
.character-capital {
  transform: translateY(-50%);
}
<div class="avatar">
  <div class="character character-capital">W</div>
</div>

<div class="avatar">
  <div class="character character-lowercase">y</div>
</div>
স্নিপেট প্রসারিত করুন

— রাগনা রোলডসেট
সূত্র
আপনার yকেন্দ্রিক নয়। আরও কিছু টুইট করুন!
— রোকো সি বুলজান
চিঠিগুলি কী হবে তা আমি আগেও জানি না।
— ক্রোন ব্যাগ
আমি এটি বুঝতে পারি, তবে একটি স্ক্রিপ্ট যা চিঠিটি উপরের- বা ছোট হাতের কিনা তা যাচাই করে এবং তার উপর ভিত্তি করে এইচটিএমএলে একটি হেল্পক্লাস রাখে তা সহজেই ঠিক করে
— ফেলবে
@ রাগনাআরএলডসেট আমি মনে করি তিনি আপার বা লোয়ার কেস বোঝাতে চাইছেন না। তিনি বোঝাতে চেয়েছিলেন এখানে ছোট আকারের চরিত্রের ভিন্নরূপ রয়েছে। তুলনা করুন oএবং yআপনি এটি পাবেন। লেজযুক্ত অক্ষরগুলি প্রথমে সমস্যা তৈরি করে (পোস্টে উল্লিখিত)।
— আনা
1
আপনি সর্বদা লেজযুক্ত সমস্ত অক্ষরের জন্য একটি অ্যারে তৈরি করতে পারেন, এবং ডিভের বর্ণটি ক্লাস প্রয়োগের আগে মিলছে কিনা তা পরীক্ষা করে লুপ করতে পারেন :) তবে আমি এটি পেয়েছি, কেবল একটি সমাধান নিয়ে আসার চেষ্টা করেছি :) আশা করি কেউ এলো তার সাথে এটি :)
— রাগনা রোলডসেট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.