راهکار CSS برای جلوگیری از اختلال در انتخاب متن هوش مصنوعی نهال
با استفاده از CSS Custom Highlight API، بدون تغییر در DOM و بدون از بین رفتن انتخاب متن کاربر (Selection)، کلمات کلیدی را هایلایت کنید. راهنمای فنی برای بهبود ت
بسیاری از توسعه‌دهندگان وب هنگام طراحی بخش‌های جست‌وجو یا پردازش متن، با چالشی آزاردهنده روبرو می‌شوند. تصور کنید در حال خواندن یک مقاله طولانی هستید و بخشی از متن را با ماوس انتخاب کرده‌اید تا بعداً کپی کنید. در همین حین، یک ابزار جست‌وجو یا یک دستیار هوشمند شروع به هایلایت کردن کلمات کلیدی در صفحه می‌کند. ناگهان مشاهده می‌کنید که متنی که خودتان انتخاب کرده بودید، از حالت انتخاب خارج می‌شود. این اتفاق نه تنها تجربه کاربری را تخریب می‌کند، بلکه باعث سردرگمی در تعامل با رابط‌های کاربری مدرن می‌شود.
چرا هایلایت کردن سنتی باعث پرش متن می‌شود؟
روش سنتی برای هایلایت کردن متن در صفحات وب، استفاده از تگ‌هایی مانند ۰ یا ۱ است. وقتی می‌خواهید کلمه‌ای را رنگی کنید، باید ساختار درختی صفحه (DOM) را تغییر دهید. یعنی متن ساده را برمی‌دارید، آن را داخل یک تگ جدید می‌گذارید و دوباره در صفحه جایگذاری می‌کنید.
این تغییر در ساختار درختی، مرورگر را مجبور می‌کند تا وضعیت انتخاب متن توسط کاربر (Selection) را بازنشانی کند. در واقع مرورگر فکر می‌کند محتوای صفحه عوض شده است و دیگر نمی‌داند انتخاب قبلی شما به کدام بخش تعلق داشت. این مشکل در ابزارهای هوشمند که به صورت لحظه‌ای متن را تحلیل می‌کنند، بسیار بیشتر به چشم می‌آید.
معرفی CSS Custom Highlight API
برای حل این مشکل، قابلیتی به نام CSS Custom Highlight API معرفی شده است. این ابزار به توسعه‌دهندگان اجازه می‌دهد تا محدوده‌هایی از متن را بدون تغییر در ساختار HTML، استایل‌دهی کنند. با این روش، شما دیگر تگی به صفحه اضافه نمی‌کنید، بلکه به مرورگر می‌گویید: «از نویسنده شماره ۱۰ تا ۲۰ را با این رنگ نشان بده».
مزایای استفاده از این روش جدید
۱. حفظ انتخاب کاربر: چون ساختار صفحه دستکاری نمی‌شود، متنی که کاربر با ماوس انتخاب کرده است، ثابت می‌ماند. ۲. عملکرد سریع‌تر: مرورگر نیاز به رندر مجدد کل ساختار درختی ندارد و فقط لایه ظاهری را تغییر می‌دهد. ۳. کدنویسی تمیزتر: دیگر نیازی به مدیریت پیچیده تگ‌های اضافه و پاک‌سازی آن‌ها پس از جست‌وجو نیست.
نحوه پیاده‌سازی در پروژه‌های وب
برای استفاده از این قابلیت، ابتدا باید یک محدوده (Range) ایجاد کنید. این محدوده شامل نقاط شروع و پایان متنی است که قصد دارید هایلایت شود. سپس این محدوده را به شیء ۲ معرفی می‌کنید و در نهایت آن را در ۳ ثبت می‌کنید.
در سمت CSS نیز کافی است از انتخاب‌گر ۴ استفاده کنید تا رنگ پس‌زمینه یا متن را برای آن نام خاص تعیین کنید. این جداسازی کامل منطق نمایش از ساختار محتوا، همان چیزی است که توسعه وب مدرن به آن نیاز دارد.
کاربرد در دستیارهای هوشمند و ایجنت‌ها
در پلتفرم‌هایی مانند هوش مصنوعی نهال، که دستیارهای هوشمند به صورت مداوم در حال تحلیل و بررسی متن‌های فارسی هستند، این موضوع اهمیت دوچندان پیدا می‌کند. وقتی یک ایجنت هوشمند در حال استخراج اطلاعات از یک متن حقوقی یا اداری طولانی است، نباید تمرکز کاربر را با پرش‌های ناگهانی متن از بین ببرد.
استفاده از زیرساخت‌های استاندارد وب به همراه مدل‌های بین‌المللی که در بستر فارسی نهال ارائه می‌شوند، این امکان را فراهم می‌کند که رابط کاربری نرم و روانی داشته باشید. فرقی نمی‌کند از خدمات شخصی برای مطالعه استفاده می‌کنید یا در حال توسعه یک سیستم سازمانی هستید؛ دقت در این جزئیات فنی است که تفاوت یک ابزار حرفه‌ای را با پروژه‌های معمولی مشخص می‌کند.
محدودیت‌ها و پشتیبانی مرورگرها
با وجود اینکه این قابلیت بسیار کاربردی است، باید توجه داشت که تمام مرورگرهای قدیمی از آن پشتیبانی نمی‌کنند. در حال حاضر نسخه‌های جدید کروم، اج و سافاری به خوبی این API را اجرا می‌کنند. برای پروژه‌هایی که مخاطبان با سیستم‌های بسیار قدیمی دارند، همچنان باید از روش‌های جایگزین استفاده کرد یا از کتابخانه‌های کمکی بهره برد.
رعایت استانداردهای مدرن در طراحی دستیارهای هوشمند، باعث می‌شود تعامل انسان و ماشین به تجربه‌ای لذت‌بخش تبدیل شود. هدف نهایی در هوش مصنوعی نهال نیز همین است؛ ارائه ابزارهای پیچیده در ساده‌ترین و دسترس‌پذیرترین شکل ممکن برای تمام کاربران فارسی‌زبان.
منبع: dev.to