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

Question

ধরা যাক আমার কাছে এসভিজি ফাইল রয়েছে:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

আমি একরকম উপরের সারিবদ্ধ করতে চান aএবং b। আসলে, আমি চাই আমার অবস্থানটি তার rooflineপরিবর্তে অনুযায়ী baselineহোক!

Comments

শুধুমাত্র উত্তর যে ইন্টারনেট কাজ করে: stackoverflow.com/a/29089222/9069356

— Dominus.Vobiscum

Answer 1

alignment-baselineসম্পত্তি কি আপনি এটা নিম্নলিখিত মান গ্রহণ করতে পারেন খুঁজছেন

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

ডাব্লু 3 সি থেকে বর্ণনা

এই সম্পত্তিটি নির্দিষ্ট করে যে কোনও কীভাবে তার পিতামাতার সাথে সম্মিলিত হয়। এই বৈশিষ্ট্যটি উল্লেখ করে যে এই উপাদানটির কোন বেসলাইনটি পিতামাতার সাথে সম্পর্কিত বেসলাইনের সাথে প্রান্তিক করা হবে। উদাহরণস্বরূপ, এটি রোমান পাঠ্যের বর্ণমালা ভিত্তিকরেখাগুলি হরফ আকারের পরিবর্তনের সাথে জুড়ে থাকতে পারে। এটি প্রান্তিককরণ-বেসলাইন সম্পত্তির গণিত মান হিসাবে একই নামের সাথে বেসলাইনটিতে ডিফল্ট হয়। অর্থাৎ ব্লক-অগ্রগতি-দিকনির্দেশে "আদর্শিক" প্রান্তিককরণের অবস্থানটি বস্তুর বেসলাইন-সারণিতে প্রান্তিককরণের ক্ষেত্রে "আদর্শিক" বেসলাইনটির অবস্থান is

ডাব্লু 3 সি উত্স

দুর্ভাগ্যক্রমে, যদিও এটি প্রদর্শিত হওয়ার পরে আপনার এটি অর্জনের "সঠিক" উপায় ফায়ারফক্স এসভিজি টেক্সট মডিউলটির ( 'ফায়ারফক্সে এসভিজি' এমডিএন ডকুমেন্টেশন ) এর জন্য উপস্থাপনাের অনেকগুলি বৈশিষ্ট্য প্রয়োগ করে নি what

Comments

তার সাথে ভাগ্য ছিল না। আপনি একটি উদাহরণ দিতে পারেন?

— SeMeKh

আমার মতে সবচেয়ে ভাল উত্তর, যেমন এটি আমার উত্তরটি দেয়ালের কোনও পাঠ্য পৃষ্ঠায় নেভিগেট না করেই উত্তর দিয়েছে I আমি আমার পাঠ্যটি y = 0 এ প্রদর্শন করতে চেয়েছিলাম, তবে এটি স্ক্রিনের বাইরে ছিল, তাই আমি একটি সিএসএস বিধি "এলাইনমেন্ট- বেসলাইন: হ্যাঙ্গিং ", এবং এটি ঠিক আমি যা খুঁজছিলাম তা করেছিল, এসভিজি ধারকটির সর্বোচ্চ পয়েন্টে একটি পিক্সেল অফস্ক্রিন ছাড়াই text

— আর হিল

@ সেমিখ: হুম ঘটনাচক্রে, এটি ক্রোমিয়ামে আমার জন্য কাজ করেছিল, তবে এখন আমি কেবল যাচাই করেছি যে এটি ফায়ারফক্সে কাজ করে না। সুতরাং দেখা যাচ্ছে যে এই সম্পত্তিটি এখন পর্যন্ত ব্রাউজারগুলিতে ধারাবাহিকভাবে সমর্থিত নয়।

— আর হিল

@ আর.হিল এখানে ফায়ারফক্সের বাগেরপোর্ট যা 11 বছর আগে খোলা হয়েছিল bugzilla.mozilla.org/show_bug.cgi?id=308338 বিটিডব্লু: 'মাঝারি' এবং 'কেন্দ্রীয়' এর মধ্যে পার্থক্য কী?

— mxMLnkn

ভুল করে উপড়ে পড়েছি এবং যেহেতু আমি আগেও একই ভুল করেছি তাই আমি এটিকে পূর্বাবস্থায় ফেরাতে পারি না। Fire ফায়ারফক্সে এসভিজির জন্য কাজ alignment-baseline: centralকরে না এবং এটি নকশাকৃত বলে মনে হয়। dominant-baseline: centralআমি যতদূর চেষ্টা করেছি প্রতিটি ব্রাউজারে কাজ করে, যেমনটি এই উত্তরে নির্দেশিত হয়েছে: stackoverflow.com/a/15997503/1450294

— মাইকেল শ্যাপার

Answer 2

করা SVG বৈশিষ্ট অনুযায়ী, alignment-baselineশুধুমাত্র প্রযোজ্য <tspan>, <textPath>, <tref>এবং <altGlyph>। আমার বোধগম্যতা এটি হ'ল এটি <text>তাদের উপরের বস্তুটি থেকে অফসেট করতে ব্যবহৃত হয় । আমি মনে করি আপনি যা খুঁজছেন তা হ'ল dominant-baseline।

এর সম্ভাব্য মানগুলি dominant-baseline:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

প্রতিটি সম্ভাব্য মান সম্পর্কে আরও তথ্যের জন্য প্রভাবশালী-বেসলাইন সম্পত্তির জন্য ডাব্লু 3 সি সুপারিশ পরীক্ষা করে দেখুন।

Comments

এটি ফায়ারফক্সের সাথে আমার সমস্যাগুলি স্থির করে (যা "অ্যালাইনমেন্ট-বেসলাইন" সম্পত্তি নিয়ে কাজ করে না)। "প্রভাবশালী-বেসলাইন" ক্রোম এবং ফায়ারফক্সে কাজ করে। ধন্যবাদ!

— মারিয়ানো দেশানজে

এটি এই মুহুর্তে IE এর কোনও সংস্করণে কাজ করে না, সুতরাং দুর্ভাগ্যক্রমে, অনেক বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলির জন্য এটি সত্যিই কার্যকর নয়।

— যোনা অ্যাপলেট্রি

যেহেতু আইই কোনও প্রভাবশালী-বেসলাইন, বা প্রান্তিককরণ-বেসলাইন সমর্থন করে না element.hasAttribute('dominant-baseline'), তাই আপনি বৈশিষ্ট্যটির জন্য সমর্থনটি চেক করতে পারেন এবং যদি এটি dy=-0.4emজবাব দেয় তবে এই উত্তরে বর্ণিত হিসাবে প্রয়োগ করুন stackoverflow.com/a/29089222/2296470

— টিগ্রান

প্রভাবশালী-বেসলাইন: কেন্দ্রীয় আমার ক্ষেত্রে কাজ করেছে। ধন্যবাদ!

— লিয়াম মিশেল

জেনে থাকুন যে প্রভাবশালী-বেসলাইন IE10-12 এবং এজ 16 দ্বারা সমর্থিত নয়

— জাপারস্কট

Answer 3

অ্যাট্রি ("প্রভাবশালী-বেসলাইন", "কেন্দ্রীয়")

Comments

এটি চরিত্রের কেন্দ্র (যেমন ফন্ট গ্লাইফগুলি দুর্দান্তভাবে খেলবে) দ্বারা সরে যায়, নিশ্চিত হন না যে এখানে এই প্রশ্নের উত্তর কী।

— ম্যাটানস্টার

এটি ডি 3 বা বৈশিষ্ট্যগুলি নির্ধারণের jquery পদ্ধতি

— গ্লিফ

এই সমাধানটি পাঠ্যের উল্লম্ব কেন্দ্রে বেসলাইনটি রাখে। সুতরাং y স্থানাংকটি উল্লম্ব কেন্দ্রে রয়েছে। এই উত্তরটি আমি খুঁজছিলাম। ধন্যবাদ।

— হেনরি

উত্তরের মূলটি সঠিক - সেন্ট্রিনের উপর প্রভাবশালী-বেসলাইন অ্যাট্রিবিউট সেট করুন, তবে অ্যাট্রি () কোনও দেশীয় জেএস ফাংশন নয় এবং এর কোনও ব্যাখ্যা নেই।

— jave.web

Answer 4

আপনি যদি IE এ এটি পরীক্ষা করে থাকেন তবে প্রভাবশালী-বেসলাইন এবং প্রান্তিককরণ-বেসলাইন সমর্থিত নয়।

আইই তে পাঠ্য কেন্দ্রের সর্বাধিক কার্যকর উপায় হ'ল "ডাই" দিয়ে এরকম কিছু ব্যবহার করা:

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

নেতিবাচক মান এটিকে উপরে স্থানান্তরিত করবে এবং ডাই এর ধনাত্মক মান এটি নীচে স্থানান্তরিত করবে। আমি -৪ এম ব্যবহার করে খুঁজে পেয়েছি -৫ এম এর চেয়ে আমার কাছে উল্লম্বভাবে কিছুটা কেন্দ্রিক মনে হয় তবে আপনি এর বিচারক হবেন।

Comments

আইই তে কাজ করে এমন একমাত্র উত্তর পাওয়ার জন্য আপনাকে ধন্যবাদ। এটি করা আমাদের লজ্জার বিষয়, তবে অন্যান্য উত্তরগুলি ক্রোম / এফএফ-এ কাজ করে সমস্ত কিছু পেতে আমার উল্লেখযোগ্য পরিমাণ সময় নষ্ট করে, তারপরে ব্রাউজার পরীক্ষার সময় এটি IE তে কাজ করে না তা সন্ধান করে।

— যোনা অ্যাপলেট্রি

দুর্দান্ত ও সাধারণ সিদ্ধান্ত! এবং ব্রাউজারগুলিতে এটির সমর্থনকারী পাঠ্যের অবস্থানের প্রভাব বাদ দিতে আমাদের "অ্যালাইনমেন্ট-বেসলাইন" বৈশিষ্ট্যটি অপসারণ করা উচিত।

— ইয়াটরাস

Answer 5

এসভিজি সুপারিশটি দেখার পরে আমি বুঝতে পেরেছি যে বেসলাইন বৈশিষ্ট্যগুলি অন্য পাঠ্যের সাথে সম্পর্কিত পাঠ্যকে নির্দিষ্ট করে বোঝানো হয়, বিশেষত বিভিন্ন ফন্ট এবং বা ভাষার মিশ্রণের সময়। আপনি যদি পাঠ্য পোস্ট করতে চান যাতে এটি শীর্ষে থাকে yতবে আপনার ব্যবহারের প্রয়োজন dy = "y + the height of your text"।

Comments

অনুমানটির লিঙ্কটির প্রশংসা করুন, কিছু সত্যই সেখানে দরকারী পড়া। "<list-of-lengths>"উদাহরণস্বরূপ (লিঙ্কযুক্ত) বিকল্প সম্পর্কে অবগত ছিল না (প্রতি চরিত্রের হেরফেরের অনুমতি দেয়)

— ব্রিচিন্স