বছরের পর বছর ধরে, ওয়েব ডেভেলপারদের অত্যন্ত ইন্টারঅ্যাক্টিভ ভিজ্যুয়াল অ্যাপ্লিকেশন তৈরি করার সময় একটি কঠিন সিদ্ধান্তের মুখোমুখি হতে হয়েছে: এর সমৃদ্ধ সিম্যান্টিক ফিচারের জন্য DOM-এর উপর নির্ভর করা, নাকি নিম্ন-স্তরের গ্রাফিক্স কর্মক্ষমতার জন্য <canvas> এলিমেন্টে রেন্ডার করা। নতুন পরীক্ষামূলক HTML-in-Canvas API, যা এখন অরিজিন ট্রায়ালে উপলব্ধ, এই আপস দূর করে। এটি ডেভেলপারদের DOM কনটেন্ট সরাসরি 2D ক্যানভাস বা WebGL/WebGPU টেক্সচারে আঁকতে দেয়, পাশাপাশি ইউআইকে ইন্টারঅ্যাক্টিভ, অ্যাক্সেসযোগ্য এবং ব্রাউজার ফিচারের সঙ্গে সংযুক্ত রাখে।
DOM হলো ওয়েব ইউআইয়ের ভিত্তি। এটি বিল্ট-ইন টেক্সট লেআউট এবং সিম্যান্টিকভাবে বোধগম্য কনটেন্ট প্রদান করে এবং দৈনন্দিন কাজ যেমন কপি করার জন্য টেক্সট হাইলাইট করা বা সংরক্ষণের জন্য কোনো ছবিতে রাইট-ক্লিক করা সমর্থন করে। এটি অ্যাক্সেসিবিলিটি টুল, অনুবাদ, পেজের ভিতরে খোঁজা, রিডার মোড, এক্সটেনশন, ডার্ক মোড, ব্রাউজার জুম এবং অটোফিলের সঙ্গেও একীভূত। WebGL ও WebGPU সহ ক্যানভাস উন্নত 2D ও 3D গ্রাফিক্সের জন্য নিম্ন-স্তরের পিক্সেল অ্যাক্সেস দেয়, যার উপর গেম এবং Google Docs ও Figma-এর মতো জটিল অ্যাপ্লিকেশন নির্ভর করে। তবে ক্যানভাস পিক্সেলের একটি গ্রিড হওয়ায়, এর ভিতরের ইউআই এই ব্রাউজার সংযোগগুলো হারায় এবং প্রায়শই ভারী কাস্টম লজিকের প্রয়োজন হয়।
HTML-in-Canvas API এই ব্যবধান দূর করে। <canvas> এলিমেন্টের ভিতরে HTML রেখে এবং এর ট্রান্সফর্ম সিঙ্ক্রোনাইজ করে, ডেভেলপাররা সরলীকৃত টেক্সট লেআউট, প্রকাশক্ষম ফর্ম কন্ট্রোল, নেটিভ টেক্সট নির্বাচন ও কনটেক্সট মেনু, অ্যাক্সেসিবিলিটি ট্রিতে প্রকাশ, পেজের ভিতরে খোঁজার সমর্থন, ক্রলার ও AI এজেন্টের জন্য ইনডেক্সযোগ্যতা, এক্সটেনশন সামঞ্জস্য এবং Chrome DevTools-এ পরিদর্শনের সুবিধা পান। ব্যবহারের ক্ষেত্রগুলোর মধ্যে রয়েছে বড় ক্যানভাস-ভিত্তিক অ্যাপ্লিকেশন, 3D দৃশ্য ও ওয়েব গেম, এবং ইমার্সিভ WebXR অভিজ্ঞতা যেগুলোর প্রকৃত, ইন্টারঅ্যাক্টিভ DOM ইউআই প্রয়োজন।
উৎস: Hacker News · সারাংশ: HeadlinesBriefing