কোনও এসভিজি আয়তক্ষেত্রে পাঠ্য কীভাবে রাখবেন এবং রাখবেন

Question

আমার নীচের আয়তক্ষেত্রটি আছে ...

<rect x="0px" y="0px" width="60px" height="20px"/>

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

এ খুঁজছি http://www.w3.org/TR/SVG/text.html#TextElement উদাহরণ থেকে টেক্সট উপাদান এর এক্স না সাহায্য করেন এবং y থেকে আয়তক্ষেত্র এর x এবং y ভিন্ন। পাঠ্যের উপাদানগুলির জন্য প্রস্থ এবং উচ্চতা বলে মনে হচ্ছে না। আমি এখানে গণিত সম্পর্কে নিশ্চিত নই।

(আমার এইচটিএমএল টেবিলটি কেবল কাজ করছে না))

Comments

আপনি দয়া করে পাঠ্য-অ্যাঙ্কর এবং প্রভাবশালী-বেসলাইনটি উত্তরটি স্যুইচ করতে পারেন? ধন্যবাদ!

— নিউউউজিক

neaumusic, সম্পন্ন। 8)

— লেডি আলেেনা

Answer 1

অনুভূমিকভাবে এবং উল্লম্বভাবে এসভিজিতে পাঠ্য কেন্দ্রের একটি সহজ সমাধান:

1. আপনি যে উপাদানটি এটিতে কেন্দ্র করতে চান তার নিখুঁত কেন্দ্রে পাঠ্যের অবস্থান সেট করুন :

   • যদি এটি পিতামাতা হয়, আপনি ঠিক করতে পারেন x="50%" y ="50%"।
   • যদি এটি অন্য উপাদান হয় xতবে xসেই উপাদানটির দৈর্ঘ্য হবে + এর অর্ধেক প্রস্থ (এবং yউচ্চতার সাথে তবে সমান )।

2. text-anchorমানটি দিয়ে অনুভূমিকভাবে পাঠ্যটি কেন্দ্র করতে সম্পত্তিটি ব্যবহার করুন middle:

   মধ্যম

   রেন্ডার করা অক্ষরগুলি এমনভাবে সারিবদ্ধ করা হয় যে ফলস্বরূপ রেন্ডার করা পাঠ্যের জ্যামিতিক মাঝারিটি বর্তমান বর্তমান পাঠ্য অবস্থানে থাকে।

3. dominant-baselineমানটির সাহায্যে পাঠ্যটিকে উল্লম্বভাবে কেন্দ্র করতে সম্পত্তিটি ব্যবহার করুন middle(বা আপনি এটি দেখতে কেমন দেখতে চান তার উপর নির্ভর করে আপনি করতে চাইতে পারেন central)

এখানে একটি সাধারণ ডেমো রয়েছে:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

Comments

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

— অ্যান্থনিথেরকজহানসন

আমার ক্ষেত্রে এটি dominant-baselineসম্পত্তি যা কাজ করে, তা নয় alignment-baseline।

— পিনটোচ

আপনি এই নিয়মিতভাবে কাজ করতে যাচ্ছেন, তাহলে আপনি নিম্নলিখিত যোগ করতে পারেন: <style type="text/css"><![CDATA[ text { alignment-baseline: middle; text-anchor:middle; } ]]></style>। সমাধানের জন্য ধন্যবাদ।

— মাংগো

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

— রেজিস মে

@ রেজিসমে এটি দেখানোর জন্য ধন্যবাদ। আমি Mac এ Chrome আছি এবং এটির সাথে জরিমানা কাজ alignment-baseline, কিন্তু মনে হচ্ছে এটি একটি quirky জিনিস কারণ চশমা পর্যালোচনার পরে, এটি হওয়া উচিত হতে পারে dominant-baselineজন্য text, এবং alignment-baselineজন্য tspan, tref, altGlyph, এবং textPath। আমি সেই অনুযায়ী উত্তর আপডেট করেছি।

— আলভারো মন্টোর

Answer 2

এসভিজি ১.২ ছোট টেক্সট মোড়ানোর জন্য যুক্ত করা হয়েছে, তবে ব্রাউজারে (অপেরা ব্যতীত) আপনি যে এসভিজির সন্ধান পাবেন সেটি বেশিরভাগ বাস্তবায়ন এই বৈশিষ্ট্যটি কার্যকর করেনি। ম্যানুয়ালি পাঠ্য অবস্থানের পক্ষে এটি আপনার বিকাশকারী সাধারণত।

এসভিজি ১.১ স্পেসিফিকেশন এই সীমাবদ্ধতার একটি ভাল ওভারভিউ এবং এটি কাটিয়ে উঠার সম্ভাব্য সমাধান সরবরাহ করে:

প্রতিটি 'পাঠ্য' উপাদানটি একক স্ট্রিংয়ের পাঠ্যকে রেন্ডার করে। এসভিজি কোনও স্বয়ংক্রিয় লাইন ব্রেকিং বা শব্দ মোড়ানো করে না। একাধিক লাইনের পাঠ্যের প্রভাব অর্জন করতে, নিম্নলিখিত পদ্ধতির একটি ব্যবহার করুন:

• লেখক বা অনুমোদনের প্যাকেজটির লাইন ব্রেকগুলি প্রাক-গণনা করা এবং একাধিক 'পাঠ্য' উপাদানগুলি (পাঠ্যের প্রতিটি লাইনের জন্য একটি) ব্যবহার করা দরকার।
• লেখক বা অনুমোদনের প্যাকেজটির রেখা বিরতিতে প্রাক-গণনা করা প্রয়োজন এবং এক বা একাধিক 'tspan' শিশু উপাদানগুলির সাথে 'x', 'y', 'dx' এবং 'dy' এর উপযুক্ত মান সহ একক 'পাঠ্য' উপাদানটি ব্যবহার করা উচিত যারা নতুন লাইন শুরু করেন তাদের জন্য নতুন শুরু অবস্থানগুলি সেট করতে। (এই পদ্ধতির সাহায্যে পাঠ্যের একাধিক লাইন জুড়ে ব্যবহারকারীর পাঠ্য নির্বাচনের অনুমতি দেওয়া হয় - পাঠ্য নির্বাচন এবং ক্লিপবোর্ড অপারেশন দেখুন see)
• এক্সএইচটিএমএল [এক্সএইচটিএমএল] যেমন একটি 'বিদেশীঅবজেক্ট' উপাদানটির মধ্যে এম্বেড থাকা ইনলাইনটিকে অন্য এক্সএমএল নেমস্পেসে রেন্ডার করার জন্য পাঠ্যটি প্রকাশ করুন। (দ্রষ্টব্য: এই পদ্ধতির সঠিক শব্দার্থবিদ্যা এই মুহূর্তে সম্পূর্ণরূপে সংজ্ঞায়িত করা হয়নি।)

http://www.w3.org/TR/SVG11/text.html#Introduction

আদিম হিসাবে, পাঠ্য মোড়ানোর বিষয়টি dyবৈশিষ্ট্য এবং tspanউপাদানগুলি ব্যবহার করে সিমুলেটেড করা যায় এবং যেমনটি অনুমানে বলা হয়েছে, কিছু সরঞ্জাম এটি স্বয়ংক্রিয় করতে পারে। উদাহরণস্বরূপ, ইনস্কেপে, আপনি যে আকারটি চান তা নির্বাচন করুন এবং আপনি যে পাঠ্যটি চান তা নির্বাচন করুন এবং পাঠ্য -> ফ্রেমে ফ্লো ব্যবহার করুন। এটি আপনাকে মোড়ক সহ আপনার পাঠ্যটি লেখার অনুমতি দেবে যা আকারের সীমানার উপর ভিত্তি করে মোড়ানো হবে। এছাড়াও, নিশ্চিত করুন যে আপনি এসভিজি ১.১ এর সাথে সামঞ্জস্য বজায় রাখতে ইনস্কেপকে এই নির্দেশাবলী অনুসরণ করেছেন: http://wiki.inkscape.org/wiki/index.php/ FAQ#Wab_about_flowed_text.3F

তদ্ব্যতীত, কিছু জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা পাঠ্য মোড়কে প্রক্রিয়াকরণে স্বয়ংক্রিয়ভাবে ব্যবহার করতে পারে: http://www.carto.net/papers/svg/textFlow/

কোনও পাঠ্য উপাদানকে কোনও আকার মুড়িয়ে দেওয়ার জন্য সিএসভিজির সমাধানটি দ্রষ্টব্য আকর্ষণীয় (উদাহরণস্বরূপ তাদের "বোতাম" উদাহরণ দেখুন), যদিও এটি উল্লেখ করা গুরুত্বপূর্ণ যে তাদের প্রয়োগটি একটি ব্রাউজারে ব্যবহারযোগ্য নয় : http://www.csse.monash.edu .au / ~ CLM / csvg / about.html

আমি এটি উল্লেখ করছি কারণ আমি একটি সিএসভিজি-অনুপ্রাণিত গ্রন্থাগার তৈরি করেছি যা আপনাকে অনুরূপ কাজ করতে দেয় এবং ওয়েব ব্রাউজারগুলিতে কাজ করে, যদিও আমি এখনও এটি প্রকাশ করি নি।

Comments

উত্তরের জন্য ধন্যবাদ ... তবে এসিকে! দেখা যাচ্ছে যে আমাকে তখন এসভিজি ডাম্প করতে হবে। বিকাশকারীদের প্রথম যে জিনিসগুলির কথা ভাবা উচিত ছিল তার মধ্যে একটি হ'ল পাঠ্য (ব্যবহারকারীদের ইচ্ছামত ফর্ম্যাট করা) সংযুক্ত করা ছিল! আমি আরও কিছু না করার আগে তারা একসাথে তাদের অভিনয় না পাওয়া পর্যন্ত অপেক্ষা করব। আমি এটি উইন্ডোজ পেইন্টে পুনরায় আঁকতে চেষ্টা করব এবং এটি এটি করবে কিনা তা দেখুন। (কেবলমাত্র যদি আমি ব্রাউজারগুলি সঠিকভাবে টেবিলটি প্রদর্শন করতে পারি))

— লেডি আলেেনা

এসভিজি-তে সম্পাদনাযোগ্য পাঠ্য সম্পর্কে, অপেরা এসভিজি ১.২ টিনি থেকে সম্পাদনযোগ্য বৈশিষ্ট্যটিকে সমর্থন করে, যা কেবল editable="true"পাঠ্য বা পাঠ্যআরিয়া উপাদানটিতে একটি বৈশিষ্ট্য যুক্ত করে সম্পাদনাযোগ্য পাঠ্য পাওয়া সম্ভব করে ।

— এরিক ডাহলস্ট্রোম

@ এরিক, আবারও অপেরা বক্ররেখার চেয়ে এগিয়ে।

— jbeard4

@ লেডি আলেেনা, আমি যে ইঙ্কস্কেপ সমাধানটি ব্যবহার করেছি তা কেন ব্যবহার করবেন না? যদি এটি কেবল একটি স্থিতিশীল চিত্র (যেমন কোনও গতিশীল আচরণ নয়, কোনও পাঠ্য সামগ্রীকে পরিবর্তনশীলভাবে আপডেট করা হয় না), তবে এটি ঠিক কাজ করা উচিত। এছাড়াও, এটি স্কেলেবল হবে, যা পেইন্ট তা করবে না, কারণ পেইন্ট রাস্টার গ্রাফিক্স তৈরি করে। পরিশেষে, আমি বিশ্বাস করি না যে পেইন্ট কোনও স্তরের পাঠ্য মোড়কে সমর্থন করে।

— jbeard4

@ ইকো-ফ্লো আমি এইচটিএমএল জেনারেট করার জন্য মাইক্রোসফ্ট ফ্রন্ট পৃষ্ঠা ব্যবহার করার পরে (এবং পরবর্তীকালে ডাম্পড) কোড তৈরির প্রোগ্রামগুলিতে সমস্ত আস্থা হারিয়েছি। আমি যা লিখছি তার সাথে নিজের স্বত্বাধিকারী কোড যুক্ত প্রোগ্রামগুলি থেকে আমি সর্বদা সতর্ক থাকি। সামনের পৃষ্ঠাটি সত্যই আমার এইচটিএমএলকে বিশৃঙ্খল করেছে। আপনি যদি কোনও ইনস্কেপ ব্যবহারকারী হন, আপনি কি আমাকে বলতে পারবেন যে এসক্স্জ-এর তৈরির পরে আমার যদি ksুকতে এবং বের করতে হয় তবে ইনজস্কেপ তার নিজস্ব মালিকানাধীন কোডটি রাখে?

— লেডি আলেেনা

Answer 3

পূর্ববর্তী উত্তরগুলি গোলাকার কোণগুলি ব্যবহার করার সময় বা stroke-widthএটি> 1 এর ক্ষেত্রে খারাপ ফলাফল দেয় । উদাহরণস্বরূপ, আপনি নীচের কোডটি একটি বৃত্তাকার আয়তক্ষেত্র উত্পাদনের আশা করতে পারেন, তবে কোণগুলি প্যারেন্ট svgউপাদান দ্বারা ক্লিপ করা হয়েছে :

<svg width="200" height="100">
  <!--this rect should have rounded corners-->
  <rect x="0" y="0" rx="5" ry="5" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CLIPPED BORDER</text>    
</svg>

পরিবর্তে, আমি নীচে উদাহরণ হিসাবে যেমন textএকটি svgএবং একটি নতুন উপাদান svgএবং rectএকত্রে একটি gউপাদান ভিতরে একসাথে বাসা বাঁধাই সুপারিশ :

<!--the outer svg here-->
<svg width="400px" height="300px">

  <!--the rect/text group-->
  <g transform="translate(50,50)">
    <rect rx="5" ry="5" width="200" height="100" stroke="green" fill="none" stroke-width="10"/>
    <svg width="200px" height="100px">
      <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CORRECT BORDER</text>      
    </svg>
  </g>

  <!--rest of the image's code-->
</svg>

এটি ক্লিপিংয়ের সমস্যাটি ঠিক করে যা উপরের উত্তরগুলিতে ঘটে। আমি রেকট / পাঠ্য গোষ্ঠীটি অনুবাদ করে এই transform="translate(x,y)"বৈশিষ্ট্যটি ব্যবহার করে দেখিয়েছি যে এটি স্ক্রিনটিকে রেকর্ড / পাঠ্যকে অন স্ক্রিনে স্থাপনের জন্য আরও স্বজ্ঞাত পন্থা সরবরাহ করে।

Answer 4

আপনি যদি প্রোগ্রামটিভভাবে এসভিজি তৈরি করে থাকেন তবে আপনি এটিকে সহজ করতে এবং এরকম কিছু করতে পারেন:

  <g>
      <rect x={x} y={y} width={width} height={height} />
      <text
          x={x + width / 2}
          y={y + height / 2}
          dominant-baseline="middle"
          text-anchor="middle"
      >
          {label}
      </text>
  </g>

Comments

এটা হতে Shouldsn't dominant-baselineএবং text-anchorনা dominantBaselineএবং textAnchor?

— নাথানিয়েল এম। বিভার

@ নাথানিয়েলএম.হেতু হ্যাঁ, এটি হওয়া উচিত। ভালো বল ধরা. উপরের কোডটি প্রতিক্রিয়া থেকে এসেছে যা দুর্ভাগ্যক্রমে উটকেস ব্যবহার করে বৈশিষ্ট্যটির নামকরণ করা দরকার।

— ব্রেনান চেউং

Answer 5

আপনি সরাসরি text-anchor = "middle"সম্পত্তি ব্যবহার করতে পারেন । আমি আপনার আয়তক্ষেত্র এবং পাঠ্যের উপরে একটি মোড়ক এসভিজি উপাদান তৈরি করার পরামর্শ দিচ্ছি। একটি সিএসএস নির্বাচক ব্যবহার করে আপনি পুরো উপাদানটি ব্যবহার করতে পারেন। আপনি 50% হিসাবে টেক্সটের 'x' এবং 'y' সম্পত্তি রেখেছেন তা নিশ্চিত করুন।

    <svg class="svg-rect" width="50" height="40">
        <rect x="0" y="0" rx="3" ry="3" width="50" height="40" fill="#e7e7e7"></rect>
        <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">N/A</text>
    </svg>

Answer 6

সম্পূর্ণ বিশদ ব্লগ: http://blog.techhysahil.com/svg/how-to-center-text-in-svg-shapes/

<svg width="600" height="600">
  <!--   Circle -->
  <g transform="translate(50,40)">
    <circle cx="0" cy="0" r="35" stroke="#aaa" stroke-width="2" fill="#fff"></circle>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  <!--   In Rectangle text position needs to be given half of width and height of rectangle respectively -->
  <!--   Rectangle -->
  <g transform="translate(150,20)">
    <rect width="150" height="40" stroke="#aaa" stroke-width="2" fill="#fff"></rect>
    <text x="75" y="20" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  <!--   Rectangle -->
  <g transform="translate(120,140)">
    <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  
</svg>

Comments

ফায়ারফক্সকে কেন্দ্র করে নয় যখন অন্যান্য সমাধান হয়। codepen.io/anon/pen/oEByYr

— tgf

আমি ফায়ারফক্স 58.0.1 (-৪-বিট) এ পরীক্ষা করেছি, এটি কাজ করছে। আপনি যে সংস্করণটির জন্য এটি কার্যকর হচ্ছে না তার উল্লেখ করতে পারেন?

— সাহিল গুপ্ত 20'18

ফায়ারফক্স 58.0.2 64 বিট। পাঠ্যটি যা হওয়া উচিত তার চেয়ে কিছুটা বেশি। এটি প্রথমে সহজেই লক্ষণীয় নাও হতে পারে তবে যদি আপনার বাক্সটি খুব কাছ থেকে ফিট করে তবে এটি আরও সুস্পষ্ট; উচ্চতা হ্রাস করার চেষ্টা করুন।

— টিজিএফ

Answer 7

alignment-baselineএখানে ব্যবহার করার জন্য সঠিক বৈশিষ্ট্য নয়। সঠিক উত্তরটি এর সংমিশ্রণটি ব্যবহার করাdominant-baseline="central" এবং text-anchor="middle":

<svg width="200" height="100">
    <g>
        <rect x="0" y="0" width="200" height="100" style="stroke:red; stroke-width:3px; fill:white;"/>
        <text x="50%" y="50%" style="dominant-baseline:central; text-anchor:middle; font-size:40px;">TEXT</text>
    </g>
</svg>

Answer 8

একটি আয়তক্ষেত্রের ভিতরে পাঠ্য সন্নিবেশ করার একটি উপায় হ'ল একটি বিদেশী বস্তু সন্নিবেশ করা, যা একটি ডিআইভি, রেকর্ড অবজেক্টের ভিতরে।

এইভাবে, পাঠ্যটি ডিআইভি-র সীমাবদ্ধতাকে সম্মান করবে।

var g = d3.select("svg");
					
g.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width","100%")
.attr("height","100%")
.attr("fill","#000");


var fo = g.append("foreignObject")
 .attr("width","100%");

fo.append("xhtml:div")
  .attr("style","width:80%;color:#FFF;margin-right: auto;margin-left: auto;margin-top:40px")
  .text("Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script>
<svg width="200" height="200"></svg>

Answer 9

এসভিজি ব্যবহার করে কেন্দ্রীভূত করে কিছু পাওয়া আমার একটা সময় ছিল so তাই আমি আমার নিজের ছোট্ট ফাংশনটি ঘুরিয়েছিলাম। আশা করি এটি আপনাকে সহায়তা করবে। মনে রাখবেন যে এটি কেবল এসভিজি উপাদানগুলির জন্যই কাজ করে।

function centerinparent(element) { //only works for SVG elements
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}

Answer 10

গ্রাফিক্সে পাঠ্যের অনুভূমিক এবং উলম্ব প্রান্তিককরণের জন্য, আপনি নিম্নলিখিত সিএসএস শৈলীগুলি ব্যবহার করতে চাইতে পারেন। বিশেষত, নোটটি dominant-baseline:middleসম্ভবত ভুল যেহেতু এটি (সাধারণত) উপরের এবং নীচের দিকে অর্ধেক পথের পরিবর্তে উপরের এবং বেসলাইনটির অর্ধেক পথ হয়। এছাড়াও এর পরিবর্তে কিছু কিছু উত্স (যেমন মজিলা ) ব্যবহার dominant-baseline:hangingকরে dominant-baseline:text-before-edge। এটি সম্ভবত ভুল, যেহেতু hangingইন্ডিক স্ক্রিপ্টগুলির জন্য ডিজাইন করা হয়েছে। অবশ্যই, আপনি যদি ল্যাটিন, ইন্ডিক, আইডোগ্রাফ বা অন্য কোনও মিশ্রণ ব্যবহার করছেন তবে আপনার সম্ভবত ডকুমেন্টেশনটি পড়তে হবে ।

/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}

সম্পাদনা: আমি সবেমাত্র লক্ষ্য করেছি যে মজিলা এছাড়াও ব্যবহার করে dominant-baseline:baselineযা অবশ্যই স্পষ্টত ভুল: এটি এমনকি স্বীকৃত মানও নয়! আমি ধরে নিলাম এটি হরফ হ'ল ফন্টের ডিফল্ট, যা alphabeticতারা ভাগ্যবান হয়েছে।

আরও সম্পাদনা: সাফারি (১১.১.২) বোঝে text-before-edgeকিন্তু না text-after-edge। এটি ব্যর্থ হয় ideographic। দুর্দান্ত জিনিস, অ্যাপল। সুতরাং আপনি বাধ্য হতে alphabeticএবং সর্বোপরি বংশধরদের অনুমতি দিতে পারেন । দুঃখিত।