Chrome 76-এ প্রকাশের জন্য নির্ধারিত, LayoutNG হল একটি নতুন লেআউট ইঞ্জিন যা বহু বছরের প্রচেষ্টা থেকে বেরিয়ে আসছে৷ বেশ কিছু উত্তেজনাপূর্ণ তাৎক্ষণিক উন্নতি আছে, এবং অতিরিক্ত কর্মক্ষমতা লাভ এবং উন্নত লেআউট বৈশিষ্ট্য আসছে।
নতুন কি?
- কর্মক্ষমতা বিচ্ছিন্নতা উন্নত.
- ল্যাটিন ব্যতীত অন্য স্ক্রিপ্টগুলির জন্য ভাল সমর্থন ।
- ফ্লোট এবং মার্জিনের চারপাশে অনেক সমস্যা সমাধান করে ।
- প্রচুর সংখ্যক ওয়েব সামঞ্জস্যের সমস্যা সমাধান করে ।
অনুগ্রহ করে মনে রাখবেন LayoutNG পর্যায়ক্রমে চালু করা হবে। ক্রোম 76-এ, ইনলাইন এবং ব্লক লেআউটের জন্য LayoutNG ব্যবহার করা হয়। অন্যান্য লেআউট আদিম (যেমন টেবিল, ফ্লেক্সবক্স, গ্রিড এবং ব্লক ফ্র্যাগমেন্টেশন) পরবর্তী রিলিজে প্রতিস্থাপিত হবে।
বিকাশকারী দৃশ্যমান পরিবর্তন
যদিও ব্যবহারকারীর দৃশ্যমান প্রভাব ন্যূনতম হওয়া উচিত, LayoutNG খুব সূক্ষ্ম উপায়ে কিছু আচরণ পরিবর্তন করে, শত শত পরীক্ষা ঠিক করে এবং অন্যান্য ব্রাউজারগুলির সাথে সামঞ্জস্যতা উন্নত করে। আমাদের সর্বোত্তম প্রচেষ্টা সত্ত্বেও, সম্ভবত এটি কিছু সাইট এবং অ্যাপ্লিকেশনগুলিকে রেন্ডার করবে বা কিছুটা ভিন্নভাবে আচরণ করবে৷
কর্মক্ষমতা বৈশিষ্ট্য এছাড়াও বেশ ভিন্ন; যদিও সামগ্রিকভাবে কর্মক্ষমতা আগের তুলনায় একই রকম বা কিছুটা ভালো, কিছু নির্দিষ্ট ব্যবহারের ক্ষেত্রে পারফরম্যান্সের উন্নতি হওয়ার সম্ভাবনা রয়েছে, অন্যরা কিছুটা হলেও, অন্তত স্বল্পমেয়াদীতে ফিরে আসবে বলে আশা করা হচ্ছে।
ভাসছে
ফ্লোটিং উপাদানগুলির জন্য লেআউটএনজি পুনরায় প্রয়োগ সমর্থন করে ( float: left; এবং float: right;
সুপারইম্পোজ করা বিষয়বস্তু
একটি ভাসমান উপাদানের চারপাশে বিষয়বস্তু স্থাপন করার সময় উত্তরাধিকার ফ্লোট বাস্তবায়ন সঠিকভাবে মার্জিনের জন্য দায়ী ছিল না, যার ফলে সামগ্রীটি আংশিকভাবে বা সম্পূর্ণরূপে ফ্লোটকে ওভারল্যাপ করে। এই বাগটির সবচেয়ে সাধারণ প্রকাশ ঘটে যখন একটি চিত্র একটি অনুচ্ছেদের পাশে অবস্থান করা হয় যেখানে পরিহার যুক্তি একটি লাইনের উচ্চতার জন্য অ্যাকাউন্টে ব্যর্থ হয়। ( Chromium বাগ #861540 দেখুন।)
টেক্সট ডানদিকে ভাসমান চিত্রটিকে ওভারল্যাপ করে
পাঠ্যটি ডানদিকে ভাসমান চিত্রের পাশে অবস্থিত
একটি লাইনের মধ্যে একই সমস্যা হতে পারে। নীচের উদাহরণটি একটি ভাসমান উপাদান ( #895962 ) অনুসরণ করে নেতিবাচক মার্জিন সহ একটি ব্লক উপাদান দেখায়। পাঠ্যটি ফ্লোটের সাথে ওভারল্যাপ করা উচিত নয়।
পাঠ্য ভাসমান কমলা উপাদানকে ওভারল্যাপ করে
পাঠ্য ভাসমান কমলা উপাদানের পাশে অবস্থিত
প্রসঙ্গ অবস্থান বিন্যাস
যখন একটি ব্লক ফরম্যাটিং কনটেক্সট গঠনকারী একটি উপাদান ফ্লোটের পাশে মাপ করা হয়, তখন লিগ্যাসি লেআউট ইঞ্জিন হাল ছেড়ে দেওয়ার আগে ব্লকটিকে নির্দিষ্ট সংখ্যক বার সাইজ করার চেষ্টা করবে। এই পদ্ধতিটি অপ্রত্যাশিত এবং অস্থির আচরণের দিকে পরিচালিত করে এবং অন্যান্য বাস্তবায়নের সাথে মেলে না। LayoutNG-তে ব্লকের আকার দেওয়ার সময় সমস্ত ফ্লোটগুলি বিবেচনায় নেওয়া হয়। ( Chromium বাগ #548033 দেখুন।)
নিখুঁত এবং স্থির অবস্থান এখন W3C স্পেসিফিকেশনের সাথে আরও বেশি সঙ্গতিপূর্ণ এবং অন্যান্য ব্রাউজারগুলির আচরণের সাথে আরও ভাল মেলে। দুটির মধ্যে পার্থক্য দুটি ক্ষেত্রে সবচেয়ে বেশি দৃশ্যমান:
- মাল্টি লাইন ইনলাইন ব্লক ধারণকারী
যদি ব্লক সমন্বিত একটি সম্পূর্ণ অবস্থানে একাধিক লাইন বিস্তৃত হয়, তাহলে লিগ্যাসি ইঞ্জিন ভুলভাবে ব্লকের সীমানা গণনা করতে লাইনের একটি উপসেট ব্যবহার করতে পারে। - উল্লম্ব লেখার মোড
লিগ্যাসি ইঞ্জিনের উল্লম্ব লেখার মোডে ডিফল্ট অবস্থানে বহির্ভূত-প্রবাহ উপাদান স্থাপনে অনেক সমস্যা ছিল। উন্নত লেখার মোড সমর্থন সম্পর্কে আরও বিশদ বিবরণের জন্য পরবর্তী বিভাগটি দেখুন।
ডান-থেকে-বামে (RTL) ভাষা এবং উল্লম্ব লেখার মোড
লেআউটএনজি উল্লম্ব লেখার মোড এবং দ্বিমুখী বিষয়বস্তু সহ RTL ভাষা সমর্থন করার জন্য গ্রাউন্ড আপ থেকে ডিজাইন করা হয়েছিল।
দ্বিমুখী পাঠ্য
LayoutNG দ্য ইউনিকোড স্ট্যান্ডার্ড দ্বারা সংজ্ঞায়িত সবচেয়ে আপ-টু-ডেট দ্বিমুখী অ্যালগরিদম সমর্থন করে। এই আপডেটটি শুধুমাত্র বিভিন্ন রেন্ডারিং ত্রুটিগুলিই ঠিক করে না, তবে এতে পেয়ার করা বন্ধনী সমর্থনের মতো অনুপস্থিত বৈশিষ্ট্যগুলিও রয়েছে ( Chromium বাগ #302469 দেখুন।)
অর্থোগোনাল প্রবাহ
LayoutNG উল্লম্ব প্রবাহ বিন্যাসের যথার্থতা উন্নত করে, উদাহরণস্বরূপ, একেবারে অবস্থান করা বস্তুর স্থান নির্ধারণ এবং অর্থোগোনাল ফ্লো বাক্সের আকার (বিশেষত যখন শতাংশ ব্যবহার করা হয়) সহ। W3C টেস্ট স্যুটগুলিতে 1,258টি পরীক্ষার মধ্যে, 103টি পরীক্ষা যেগুলি পুরানো লেআউট ইঞ্জিনে ব্যর্থ হয়েছিল LayoutNG-তে পাস৷
অন্তর্নিহিত মাপ
অভ্যন্তরীণ আকারগুলি এখন সঠিকভাবে গণনা করা হয় যখন একটি ব্লকে একটি অর্থোগোনাল লেখার মোডে শিশু থাকে।
টেক্সট লেআউট এবং লাইন ব্রেকিং
লিগ্যাসি ক্রোমিয়াম লেআউট ইঞ্জিন পাঠ্য উপাদান-দ্বারা-উপাদান এবং লাইন-বাই-লাইন তৈরি করেছে। এই পদ্ধতিটি বেশিরভাগ ক্ষেত্রেই ভাল কাজ করেছে কিন্তু স্ক্রিপ্টগুলিকে সমর্থন করতে এবং ভাল পারফরম্যান্স অর্জনের জন্য অনেক অতিরিক্ত জটিলতার প্রয়োজন। এটি পরিমাপের অসঙ্গতিগুলিরও প্রবণ ছিল, যার ফলে আকার-থেকে-কন্টেন্ট কন্টেইনারগুলির আকার এবং তাদের বিষয়বস্তু বা অপ্রয়োজনীয় লাইন বিরতিতে সূক্ষ্ম পার্থক্য দেখা দেয়।
লেআউটএনজি-তে, পাঠ্য অনুচ্ছেদ স্তরে রাখা হয় এবং তারপর লাইনে বিভক্ত হয়। এটি আরও ভাল পারফরম্যান্স, উচ্চ মানের পাঠ্য রেন্ডারিং এবং আরও সামঞ্জস্যপূর্ণ লাইন ব্রেকিংয়ের অনুমতি দেয়। সবচেয়ে উল্লেখযোগ্য পার্থক্য নীচে বিস্তারিত আছে.
উপাদান সীমানা জুড়ে যোগদান
কিছু স্ক্রিপ্টে, কিছু অক্ষর সংলগ্ন হলে দৃশ্যত যুক্ত হতে পারে। আরবি থেকে এই উদাহরণটি দেখুন:
লেআউটএনজিতে, যোগদান এখন কাজ করে এমনকি অক্ষর বিভিন্ন উপাদানে থাকলেও। বিভিন্ন স্টাইলিং প্রয়োগ করা হলে যোগদানগুলিও সংরক্ষণ করা হবে। ( Chromium বাগ #6122 দেখুন।)
একটি গ্রাফেম হল একটি ভাষার লিখন পদ্ধতির ক্ষুদ্রতম একক। উদাহরণস্বরূপ, ইংরেজি এবং অন্যান্য ভাষায় যেগুলি ল্যাটিন বর্ণমালা ব্যবহার করে, প্রতিটি অক্ষর একটি গ্রাফেম।
নীচের চিত্রগুলি যথাক্রমে লিগ্যাসি লেআউট ইঞ্জিন এবং লেআউটএনজিতে নিম্নলিখিত HTML এর রেন্ডারিং দেখায়:
<div>نسق</div>
<div>نس<span>ق</span></div>
দ্বিতীয় বর্ণের রূপ কীভাবে পরিবর্তিত হয় তা লক্ষ্য করুন
দুটি সংস্করণ এখন অভিন্ন
চাইনিজ, জাপানিজ এবং কোরিয়ান (CJK) লিগ্যাচার
যদিও Chromium ইতিমধ্যে লিগ্যাচারগুলিকে সমর্থন করে এবং ডিফল্টরূপে সেগুলিকে সক্ষম করে, কিছু সীমাবদ্ধতা রয়েছে: একাধিক CJK কোডপয়েন্ট যুক্ত লিগ্যাচারগুলি একটি রেন্ডারিং অপ্টিমাইজেশনের কারণে লিগ্যাসি লেআউট ইঞ্জিনে সমর্থিত নয়৷ LayoutNG এই সীমাবদ্ধতাগুলি সরিয়ে দেয় এবং স্ক্রিপ্ট নির্বিশেষে লিগ্যাচার সমর্থন করে।
নীচের উদাহরণটি Adobe SourceHanSansJP ফন্ট ব্যবহার করে তিনটি বিবেচনামূলক লিগ্যাচারের রেন্ডারিং দেখায়:
MHz সঠিকভাবে একটি লিগ্যাচার গঠন করে
কিন্তু マンション এবং 10点 করে না
তিনটি গ্রুপই প্রত্যাশিতভাবে লিগ্যাচার গঠন করে
আকার থেকে বিষয়বস্তু উপাদান
বিষয়বস্তুর আকারের উপাদানগুলির জন্য (যেমন ইনলাইন ব্লক), বর্তমান লেআউট ইঞ্জিন প্রথমে ব্লকের আকার গণনা করে এবং তারপর সামগ্রীতে লেআউট সম্পাদন করে। কিছু ক্ষেত্রে, যেমন একটি ফন্ট আক্রমণাত্মকভাবে কার্ন করলে, এর ফলে বিষয়বস্তুর আকার এবং ব্লকের মধ্যে অমিল হতে পারে। LayoutNG-তে, এই ব্যর্থতা মোডটি বাদ দেওয়া হয়েছে কারণ ব্লকটি প্রকৃত বিষয়বস্তুর উপর ভিত্তি করে মাপ করা হয়েছে।
নীচের উদাহরণটি বিষয়বস্তুর আকারের একটি হলুদ ব্লক দেখায়। এটি ল্যাটো ফন্ট ব্যবহার করে যা T এবং - এর মধ্যে ব্যবধান সামঞ্জস্য করতে কার্নিং ব্যবহার করে। হলুদ বাক্সের সীমানা পাঠ্যের সীমার সাথে মেলে।
শেষ T-এর পরে ট্রেলিং হোয়াইটস্পেস নোট করুন
বাক্সের বাম এবং ডান প্রান্তগুলি কীভাবে পাঠ্যের সীমার সাথে মেলে তা নোট করুন৷
লাইন মোড়ানো
উপরে বর্ণিত সমস্যার অনুরূপ, যদি একটি আকার-থেকে-কন্টেন্ট ব্লকের বিষয়বস্তু ব্লকের চেয়ে বড় (বিস্তৃত) হয়, তবে বিষয়বস্তু কখনও কখনও অপ্রয়োজনীয়ভাবে মোড়ানো হতে পারে। এটি বেশ বিরল তবে কখনও কখনও মিশ্র দিকনির্দেশক সামগ্রীর জন্য ঘটে।
ডানদিকে অপ্রয়োজনীয় লাইন বিরতি এবং অতিরিক্ত স্থান নোট করুন
বাক্সের বাম এবং ডান প্রান্তগুলি কীভাবে পাঠ্যের সীমার সাথে মেলে তা নোট করুন৷
আরও তথ্য
লেআউটএনজি দ্বারা নির্দিষ্ট সামঞ্জস্যপূর্ণ সমস্যা এবং বাগগুলি সম্পর্কে আরও বিশদ তথ্যের জন্য, অনুগ্রহ করে উপরে লিঙ্ক করা সমস্যাগুলি দেখুন বা ফিক্সড-ইন-লেআউটএনজি চিহ্নিত বাগগুলির জন্য ক্রোমিয়াম বাগ ডেটাবেস অনুসন্ধান করুন৷
আপনি যদি সন্দেহ করেন যে LayoutNG একটি ওয়েবসাইট ভাঙ্গার কারণ হতে পারে, অনুগ্রহ করে একটি বাগ রিপোর্ট ফাইল করুন , এবং আমরা তদন্ত করব৷