تکست فرگمنت (Text fragment) چیست؟ امروز می‌خواهیم در این مقاله به شما ویژگی (Text fragment) را معرفی کنیم که با آن به راحتی می‌توانید به محتوای مدنظرتان در یک صفحه وب لینک بزنید. Text fragment یا قطعه متنی این قابلیت را به شما می‌دهد که قطعه متن خود را به بخشی از url اضافه کنید. وقتی که با همچین لینکی به صفحه مورد نظر بروید، مرورگر با دقت متوجه خواهد شد که کاربر به دنبال چه چیزی در آن صفحه می‌گردد و این قابلیت را به مرورگر می‌دهد تا با اسکرول کردن صفحه به آن بخش از صفحه متن را هایلایت کرده و بر روی آن تاکید کند.
قبلا برای لینک دادن به بخش خاصی از سایت از آیدی‌های تعریف شده برای المان‌های مختلف استفاده می‌کردیم. به این صورت که با قرار دادن (#id) در آتربیوت href در تگ <a> می‌توانستیم به بخش مورد نظر خود لینک دهیم. اما در صورتی که دسترسی به آن سایت نداشته باشیم و برای المان مورد نظر ما آیدی تعریف نشده باشد با این شیوه قادر نخواهیم بود لینکی به بخش مورد نظر بزنیم. با ویژگی قطعه متنی می‌توان به راحتی به هر متنی که در صفحه است لیک دهیم و کاربر بعد از ورود به آن صفحه با اسکرول خودکار بر روی آن متن برود.
در چه مواردی از قطعه متنی در لینک‌های خود استفاده کنیم؟
وقتی برای خواندن بخشی از صفحه وب‌سایت دیگری که از آن نقل قول شده است لینکی را دنبال می‌کنید، پیدا کردن بخش مورد نظر در آن صفحه کار بسیار سختی خواهد بود مخصوصا اگر صفحه طولانی باشد و متن زیادی در آن قرار گرفته باشد. این قضیه بر روی تلفن‌های همراه کاملا صدق می‌کند و جستجوگران کار سختی برای پیدا کردن محتوای مورد نظر در هنگام اسکرول کردن و یا استفاده از قابلیت (find in page) خواهند داشت. جالب این است که بنابر آمار کمتر از 1% جستجوکننده‌ها از قابلیت (find in page) در کروم بر روی سیستم اندروید استفاده می‌کنند.
برای ایجاد بستری که در آن کاربر به سرعت محتوای مورد علاقه خود را در صفحاتی که به آن اشاره شده پیدا کند ما به شما پیشنهاد می‌کنیم که در صورت نیاز از تکست فرگمنت‌ها در لینک‌هایی که به صفحات دیگر می‌زنید استفاده کنید.
موتورهای جستجو
موتورهای جستجویی که به صفحات دارای محتوای مرتبط با پرس و جو (queries) کاربر لینک زده‌اند، از مزیت تکست فرگمنت‌ها که کاربر را مستقیما به قسمتی از صفحه که بیشترین ارتباط را با پرس و جو کاربر داشته باشد بهره برده‌‌اند.
برای مثال، جستجوی گوگل در اکثر مواقع به انکرهای اسم‌دار و المان‌های دارای آیدی که در صفحه در دسترس هستند لینک می‌زند. برای مثال پرس‌وجوی “lincoln gettysburg address sources” را در نظر بگیرید، جستجوی گوگل لینکی را به انکر #lincoln’s_sources را برای صفحه ویکی‌پدیا Gettysburg address به عنوان لینک “Jump to” در نظر گرفته است:
لینک‌های استنادی
بعضی وقت‌ها از لینک‌ها به عنوان استناد به صفحه خاصی در وب برای اعتبار بخشیدن به ادعای نویسنده استفاده می‌گردند. این صفحات منبع اغلب دارای محتوای طولانی هستند و پیدا کردن عبارت دقیق در آن وقت زیادی را از کاربر می‌گیرد. شاید برای شما هم اتفاق افتاده باشد که در حال خوانندن مقاله‌ای در یکی از صفحات وب باشید و با گذشت زمان کمی برای دست‌یابی به اطلاعات بیشتر در مورد یک کلمه یا موضوع خاص لینک استنادی به صفحه وب دیگری که توضیح اضافی در مورد آن مبحث را به شما می‌دهد دنبال کنید و با ورود به صفحه جدید جذب موضوع آن محتوا شوید و کلا مقاله‌ی قبلی را که مشغول خواندن آن بودید را فراموش کنید. با استفاده از لینک‌هایی که متن مورد نظر نویسنده را در صفحه استناد شده به سرعت نشان می‌دهند، می‌توان فضایی ایجاد کرد که خواننده مبحث اصلی مقاله را دنبال کند و از موضوع اصلی دور نشود.
اشتراک گذاری متن خاصی در صفحه وب
زمانی که به بخش خاصی از صفحه یک وب‌سایت استناد می‌کنید، برای مثال اشتراک بخشی از محتوا به وسیله ایمیل یا اشاره به یک نقل قول یا مطلب علمی در شبکه‌های اجتماعی مطلوب است بتوانید مستقیما به بخش خاصی لینک بزنید. اگر المان‌های آن صفحه دارای آیدی نباشند و قابلیت اشاره کردن از طریق لینک وجود نداشته باشد، امکان لینک زدن به طور مستقیم به بخش خاصی از متن را به شما نمی‌دهد.
البته می‌توان در هنگام مواجه با چنین شرایطی با گرفتن و اشتراک گذاری اسکرین شاتی از آن بخش یا با توضیحی در مورد بخشی که محتوا در آن قرار گرفته (مثلا با ذکر “به پاراگراف پنجم بروید”) بر این مشکل غلبه کنید.
راه حل پیشنهادی ما
متن مورد نظر خود را به عنوان بخشی از URL قرار دهید تا مرورگر مستقیما کاربرانتان را به آن بخش هدایت کند:
https://example.com#:~:text=prefix-,startText,endText,-suffix
اگر بخواهیم با جزئیات بیشتری بگوییم باید بخش زیر را در لینک خود قرار دهید:
:~:text=[prefix-,]textStart[,textEnd][,-suffix]
یا به طور خلاصه
context |——-match—–| context
نکته: براکت‌ها نشان دهنده پارامترهای انتخابی هستند.
با دنبال کردن همچین لینکی مرورگر اولین بخش از متن صفحه را که با لینک شما مطابقت داشته باشد را هایلایت کرده و به طور خودکار بر روی آن اسکرول می‌کند. اگر بخواهیم نحوه بررسی و پیدا کردن متن را توسط مرورگر توضیح بدیم از حوصله بحث در این مقاله خارج است و به آن نمی‌پردازیم.
متن راهنما کننده که در توضیحات بالا بعد از text= قرار می‌گیرد از بقیه لینک با استفاده از نشانه :~: جدا شده که نشان دهنده یک قطعه راهنما (directive) است که user agent باید آن را پردازش کند.
دلیل استفاده از قطعه متنی در لینک
- یکی از دلالیل استفاده از این ویژگی این است که گاهی کاربران می‌خواهند که چندین متن جدا از هم و غیر مجاور را با لینک زدن به یک صفحه خاص مشخص کنند. دو دلیل برای نشان دادن اهمیت این موضوع وجود دارد. دلیل اول را می‌توان این طور بیان کرد که طبیعی است کاربران بر روی چندین بخش کوچک از یک محتوای بزرگ تاکید کنند. مثلا نقل قول‌های یک فرد را در یک صفحه با متن طولانی مشخص کنند. دلیل دوم کنار آمدن و غلبه کردن بر پیچیدگی‌های DOM در مواردی که دستورات DOM و متن با یکدیگر تراز نیستند. ساده ترین مثالی که می‌توان به آن اشاره کرد، ستون درون یک جدول یا پاراگراف مجاور با یک تبلیغ inline است.
- احتمال دارد کاربری بخواهد متنی را که شامل چند بخش از قبیل چندین پاراگراف،لیست‌ها، ورودی‌های جدول و سایر ساختارها است را مشخص کند. هدف روش پیشنهادی ما این است به کاربر این اجازه را بدهد که متن مورد نظر خود را در عبور از مرزهای بصری و DOM به صورت دلخواه انتخاب و آن را برای خواننده مشخص کند.
- در مواردی احتمال دارد که کاربر بخواهد به متنی اشاره کند که مشابه آن در همان صفحه وجود دارد. روشی که برای اشاره به متن مورد نظر خود استفاده می‌کند باید با ارائه روشهایی برای بر طرف کردن ابهامات انطباق چندین متن با هم دیگر، موانع موجود را برای کاربر از میان بردارد.
- این گونه لینک‌ها باید قابلیت ساخته‌شدن برای هر صفحه دلخواهی در هر نوع سایت در دنیای وب را داشته باشند.
نحوه مشخص کردن یک تکه متن
در زیر یک مثال از URL رمزگذاری شده برای نشان دادن متنی بر روی صفحه مقصد آورده شده است:
در این روش از متن مانند یک کلمه کلیدی برای شناسایی بخش‌های متنی مورد نظر که باید نمایش داده شود استفاده می‌شود. قبل از تطبیق دادن متن قرار گرفته در قطعه متنی، متن استفاده شده در URL می‌بایستی کهpercent-decoded شود. دلیل این کار در این است که از بعضی از کارکترها مانند (-)، (&) و (,) که نمی‌توانند مستقیما در قطعه متنی قرار بگیرند، بتوان در URL استفاده کرد. برای استفاده این کارکترها می‌بایست از معادل آنها که از ترکیب حروف و اعداد با کارکتر (%) به وجود می‌آیند استفاده کرد. برای تطبیق قطعه متنی با محتوا این کدها شروع به رمزنگاری می‌شوند و بعد پروسه تطبیق قطعه متنی با بخش مورد نظر در محتوا، هایلایت و اسکرول بر روی متن شروع می‌شود.
از دو اصطلاح برای بیان متن‌های راهنما (directive) استفاده می‌شود: match و context.
Match بخشی از متن است که باید به کاربر نمایش داده شود. Context برای ابهام زدایی match استفاده می‌گردد و خودش هایلایت نخواهد شد. استفاده از context اختیاری است و لزومی در بودن آن نیست در حالی که متن راهنما حتما باید یک متن match مشخص شده‌ای در خود داشته باشد.
بخش Match در قطعه متنی
از match می‌توان به صورت تک آرگومان یا جفت استفاده کرد. اگر match با یک آرگومان مشخص شود (برای مثال:text=_textSnippet_) مرورگر برای جستجوی متنی که عینا مشابه بخش مورد نظر است اقدام خواهد کرد. مرورگر اولین متنی که دقیقا با آرگومان موجود در لینک مطابقت داشته باشد را هایلایت خواهدکرد. اگر لازم باشد که از دو آرگومان استفاده شود آرگومان سمت چپ شروع متن و آرگومان سمت راست پایان متن را نشان می‌دهند (برای مثال: text=_startText_,_endText_). در این حالت مرورگر شروع به جستجوی متنی که با startText شروع و با endText تمام شود می‌کند. در این حالت اگر چندین جای محتوا با متن مورد نظر ما مطابقت کنند اولین آنها در دستور DOM انتخاب خواهد شد. با استفاده از دو آرگومان برای تطبیق در اصل این اجازه را پیدا می‌کنیم که به قسمت بزرگی از متن درون صفحه اشاره کنیم بدون اینکه لینک خیلی بلندی داشته باشیم. این حالت زمانی مناسب است که متن مورد نظر در محتوا بسیار بلند باشد و نتوان آن را به طور کامل در لینک بیاوریم.
Contex
برای ابهام زدایی تکه‌های متنی در صفحاتی که متن مورد نظر ما بیشتر از یک بار آمده است می‌توان در آرگومان استفاده شده از prefix و suffix استفاده کرد. با این کار متن match زمانی با متن موجود در محتوا منطبق خواهد شد که بلافاصله بعد از متن prefix و یا دقیقا قبل ازمتن suffix آمده باشد. در صورت استفاده از این روش در آخر متن prefix (اول متن suffix) به کار رفته شده باید حتما از (-) استفاده کرد. این کار برای عدم ایجاد ابهام و همینطور استفاده از چندین متن راهنما در URL ها توصیه شده است.
برای مثال فرض کنید همانند تصویر زیر بخواهیم متن United states را هایلایت کنیم:
از آنجایی که متن United states چندین بار تکرار شده است، باید برای ابهام زدایی در کنار متن راهنما از یک suffix استفاده کنیم:
text=United States,-Minnesota Timberwolves
مشخص کردن چندین بخش مجزا از یک محتوا
کاربران می‌توانند با اضافه کردن متن‌های راهنما (directive) مختلف در بخش قطعه متنی و جدا کردن آنها با استفاده از (&) چندین بخش مجزا از هم را در محتوا مشخص کنند. هر کدام از متن‌ها در این روش به صورت جداگانه عمل می‌کنند و موفقیت یا شکست هر یک در مطابقت شدن با محتوا بر روی بقیه اثرگذار نخواهد بود. هر کدام از این متن‌های راهنما جستجوی خود را از بالای صفحه شروع خواهند کرد.
فرض کنید که در URL از 3 متن راهنمای جداگانه به شکل زیر استفاده کنیم. در صورت پیدا نشدن و عدم حضور اولین متن راهنما (foot) مرورگر به دنبال متن راهنمای دوم (hand) می‌گردد و در صورت حضور آن در محتوا بر روی آن بخش از سند اسکرول و آن را هایلایت می‌کند.
example.com#:~:text=foot&text=hand&text=leg
در صورت حضور هر سه متن “foot”، “hand” و “leg” در محتوا مرورگر بر روِی اولین بخش از محتوا که در آن متن “foot” ظاهر شده است اسکرول می‌کند و تمامی سه متن را در محتوا هایلایت خواهد کرد. از این ویژگی می‌توان هنگامی که متن مدنظر با المان‌های غیر مرتبطی مثل تصویر، جدول، ads و … به صورت inline قرار گرفته باشند استفاده کرد.
همچنین شاید کاربران بخواهند در یک متن بسیار بلند به چند بخش از آن اشاره کنند که می‌توان از این ویژگی استفاده شود.
معرفی افزونه جهت استفاده قطعه متنی در لینک
ما به شما افزونه کرومی را معرفی می‌کنیم که بتوانید با آن به راحتی به بخش خاصی از متن در یک صفحه لینک بزنید. با انتشار Chrome 80، این مرورگر از ویژگی به نام Scroll to Text Fragment شروع به پشتیبانی کرد. کار با این افزونه بسیار راحت است. کافی است که این افزونه را نصب کنید. بعد از آن به صفحه مورد نظر بروید و متنی را که می‌خواهید به آن لینک دهید انتخاب کنید و با راست کلیک کردن بر روی آن از منوی باز شده گزینه “Copy Link to Selected Text” را اتخاب کنید. متن انتخاب شده به صورت خودکار به رنگ زرد هایلات خواهد شد که نشان دهنده موفق بودن ایجاد لینک است. اکنون می‌توانید لینک مورد نظر را در هر کجا که می‌خواهید paste و از آن استفاده کنید.
نتیجه گیری
Text Fragment URL یک ویژگی قدرتمند برای لینک دادن به متنی دلخواه در صفحات وب است. جامعه علمی می‌تواند از آن برای ارائه لینک‌های استنادی یا مرجع بسیار دقیق استفاده کند. موتورهای جستجو می‌توانند از آن برای ایجاد لینکی عمیق به نتایج متن در صفحات استفاده کنند. در سایت‌های شبکه‌های اجتماعی می توان با استفاده از آن به کاربران اجازه داد تا متن خاصی از محتوای یک صفحه وب را به جای تصاویر اسکرین شات به اشتراک بگذارند.
