إضافة روابط جريئة في فيديوهات لم يربطها أحد من قبل: أجزاء من النص

تتيح لك الأجزاء النصية تحديد مقتطف نصي في جزء عنوان URL. وعند الانتقال إلى عنوان URL يتضمن هذا الجزء من النص، يمكن للمتصفح التأكيد على و/أو لفت انتباه المستخدم إليها.

Thomas Steiner

معرّفات الأجزاء

حقق Chrome 80 إصدارًا كبيرًا. احتوت على عدد من الميزات المتوقعة بشدة مثل وحدات ECMAScript في Web Workers انحدار الفراغ، السلاسل الاختيارية والمزيد. كالعادة، كان الإصدار تم الإعلان عنه من خلال مشاركة المدونة على مدونة Chromium. يمكنك الاطّلاع على مقتطف من مشاركة المدوّنة في لقطة الشاشة أدناه.

ربما تسأل نفسك ماذا تعني كل المربعات الحمراء. إنها نتيجة تشغيل والمقتطف التالي في "أدوات مطوري البرامج". وهي تُميِّز جميع العناصر التي تتضمّن السمة id.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

يمكنني وضع رابط لموضع معيّن لأي عنصر تم تمييزه بمربع أحمر بفضل معرّف الجزء التي أستخدمها بعد ذلك في تجزئة عنوان URL الخاص بالصفحة. على افتراض أنني أردت وضع رابط لموضع معيّن في القسم يُرجى تقديم ملاحظات إلينا في مربّع منتديات المنتجات في مربّع يمكنني استخدامها من خلال صياغة عنوان URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 كما ترون في لوحة "العناصر" في "أدوات المطوّرين"، يحتوي العنصر المعني على id ذات القيمة HTML1.

إذا حللت عنوان URL هذا باستخدام الدالة الإنشائية URL() في JavaScript، سيتم إظهار المكوّنات المختلفة. لاحِظ السمة hash بالقيمة #HTML1.

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

على الرغم من أنني اضطررت إلى فتح "أدوات المطوّرين" للعثور على عنصر id الذي يُظهر الكثير من البيانات حول احتمالية أن يكون مؤلف هذا القسم تحديدًا من الصفحة مرتبطًا منشور المدونة.

ماذا لو أردتُ الربط بمحتوى بدون id؟ لنفترض أنني أريد الربط بوحدات ECMAScript في عنوان Web Workers. كما ترى في لقطة الشاشة أدناه، إنّ <h1> المعني لا تحتوي على السمة id، ما يعني أنه لا توجد طريقة لربطها بهذا العنوان. هذه هي المشكلة التي تم حل أجزاء النص.

أجزاء من النص

يضيف اقتراح أجزاء نصية دعمًا إلى لتحديد مقتطف نصي في تجزئة عنوان URL. وعند الانتقال إلى عنوان URL به مثل هذا الجزء من النص، لوكيل المستخدم التأكيد عليها و/أو لفت انتباهه إليها.

توافُق المتصفح

لأسباب أمان، تتطلب الميزة فتح الروابط في سياق noopener لذلك، تأكد من تضمين rel="noopener" في <a> ترميز علامة الارتساء أو الإضافة noopener إلى قائمة Window.open() بميزات وظائف النوافذ

start

وفي أبسط صورها، تكون بنية "الأجزاء النصية" كما يلي: رمز التجزئة # متبوعًا :~:text= وأخيرًا start، الذي يمثل بنسبة مئوية النص الذي أريد الارتباط به.

#:~:text=start

لنفترض مثلاً أنني أريد الربط بعنوان وحدات ECMAScript في Web Workers في القسم مشاركة مدونة تعلن عن الميزات في Chrome 80، سيكون عنوان URL في هذه الحالة على النحو التالي:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

يتم التأكيد على جزء النص على هذا النحو. إذا نقرت على الرابط في متصفّح متوافق مثل Chrome، سيتم تمييز جزء النص التمرير إلى العرض:

start وend

ولكن ماذا لو أردتُ الربط بالقسم بأكمله بعنوان وحدات ECMAScript في مشغِّلي الويب، وليس عنوانه فقط؟ باستخدام ترميز النسبة المئوية للنص الكامل للقسم، يصبح عنوان URL الناتج طويل بشكل غير عملي.

لحسن الحظ هناك طريقة أفضل. بدلاً من النص بأكمله، يمكنني تأطير النص المطلوب باستخدام بنية start,end. لذلك، أحدّد بعض الكلمات المرمّزة بنسبة مئوية في البداية. من النص المطلوب، واثنين من الكلمات المشفرة بنسبة مئوية في نهاية النص المطلوب، مفصولة بفاصلة ,.

يبدو هذا كالتالي:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

بالنسبة إلى start، لدي ECMAScript%20Modules%20in%20Web%20Workers، ثم اتبعت فاصلة , بواسطة ES%20Modules%20in%20Web%20Workers. باسم end. عند النقر على متصفّح داعم مثل Chrome، يتم تمييز القسم بأكمله وتمريره لعرضه:

يمكنك الآن الإجابة عن أسئلتك حول اختياري لـ start وend. في الواقع، عنوان URL الأقصر قليلاً https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. مع إضافة كلمتين فقط على كل جانب، فإن ذلك سينجح أيضًا. المقارنة بين start وend القيم السابقة.

إذا انتقلت إلى مستوى أبعد من ذلك واستخدمت الآن كلمة واحدة فقط لكل من start وend، يمكنك وأرى أنني في ورطة. عنوان URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. وأصبح أقصر الآن، لكن جزء النص المميز لم يعد هو الجزء المطلوب في الأصل. تشير رسالة الأشكال البيانية يتوقف التمييز عند أول موضع ورود للكلمة Workers.، وهو صحيح، ولكن ليس ما ونهدف إلى تسليط الضوء عليه. تكمن المشكلة في أن القسم المطلوب لم يتم تحديده بشكل فريد عن طريق القيم الحالية المكونة من كلمة واحدة start وend:

prefix- و-suffix

إنّ استخدام قيم طويلة كافية للسمة start وend هو أحد الحلول للحصول على رابط فريد. مع ذلك، في بعض الحالات، لا يكون ذلك ممكنًا. في ملاحظة جانبية، لماذا اخترت هل مشاركة المدونة الخاصة بإصدار Chrome 80 كمثال؟ الإجابة عن ذلك هو أنّه في هذا الإصدار، جزء من النص هما:

لاحظ كيف يظهر في لقطة الشاشة أعلى كلمة "نص" تظهر أربع مرات. موضع الورود الرابع هو مكتوبة بخط رمز أخضر. إذا أردتُ الربط بهذه الكلمة بالتحديد، يتم ضبط السمة start. إلى text. بما أن كلمة "نص" إذًا، كلمة واحدة فقط، هي أنه لا يمكن أن يكون هناك end. فماذا أفعل الآن؟ تشير رسالة الأشكال البيانية عنوان URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text يتطابق عند ورود الكلمة "Text" في أول مرة في العنوان:

لحسن الحظ، هناك حل. وفي مثل هذه الحالات، يمكنني تحديد prefix​- و-suffix. تشير رسالة الأشكال البيانية كلمة قبل خط الرمز الأخضر "نص" هي "the"، والكلمة التالية هي "المعلمة". لا شيء من التكرارات الثلاثة الأخرى لكلمة "text" تحتوي على نفس الكلمات المحيطة. مزوَّدة بهذا الحس يمكنني تعديل عنوان URL السابق وإضافة prefix- و-suffix مثل الآخر يجب أن تكون أيضًا بترميز نسبة مئوية ويمكن أن تحتوي على أكثر من كلمة واحدة. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter. للسماح للمحلل اللغوي بتحديد prefix- و-suffix بوضوح، يجب فصلهما من start وend الاختياري مع شرطة -.

بناء الجملة الكامل

يتم توضيح البنية الكاملة للأجزاء النصية أدناه. (تشير الأقواس المربّعة إلى مَعلمة اختيارية.) يلزم ترميز قيم جميع المعلمات بنسبة مئوية. وهذا مهم بشكل خاص للشرطة أحرف - وعلامة العطف & والفاصلة ,، لذلك لا يتم تفسيرها كجزء من النص التوجيهية.

#:~:text=[prefix-,]start[,end][,-suffix]

سيطابق كل من prefix- وstart وend و-suffix النص داخل عنصر واحد فقط عنصر مستوى الحظر، ولكن نطاقات start,end الكاملة يمكن أن تمتد عبر كتل متعددة. على سبيل المثال: ستتعذّر مطابقة :~:text=The quick,lazy dog في المثال التالي، لأنّ قيمة السلسلة "Thequick" لا يظهر ضمن عنصر واحد بلا انقطاع على مستوى الكتلة:

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

لكنه يتطابق في هذا المثال:

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

إنشاء عناوين URL لأجزاء نصيّة باستخدام إحدى إضافات المتصفّح

إنّ إنشاء عناوين URL للأجزاء النصية يدويًا عملية مملة، خاصةً عندما يتعلق الأمر بالتأكد من أنّها فريدة من نوعها. إذا كنت تريد ذلك حقًا، فإن المواصفات تتضمن بعض النصائح وتسرد خطوات إنشاء عناوين URL لأجزاء نصيّة. نقدم إضافة متصفح مفتوحة المصدر تُسمى رابط إلى جزء من النص يتيح لك إلى أي نص عن طريق تحديده، ثم النقر على "نسخ الرابط إلى النص المحدد" في السياق القائمة. هذه الإضافة متاحة للمتصفحات التالية:

• رابط إلى جزء من النص في Google Chrome
• رابط إلى جزء من النص في Microsoft Edge
• رابط إلى جزء من النص في متصفّح Mozilla Firefox
• رابط إلى "جزء النص" في متصفّح Apple Safari

أجزاء نصية متعددة في عنوان URL واحد

تجدر الإشارة إلى أنّ أجزاءً متعددة من النص يمكن أن تظهر في عنوان URL واحد. ينبغي أن تكون أجزاء النص المعينة مفصولة بحرف العطف &. في ما يلي مثال على رابط يحتوي على ثلاثة أجزاء نصية: https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet

مزج أجزاء العنصر والنص

يمكن دمج أجزاء العناصر التقليدية مع أجزاء النص. من الجيد تمامًا أن يكون لديكما في عنوان URL نفسه، على سبيل المثال، لتوفير عنصر احتياطي ذي مغزى في حالة ما إذا كان النص الأصلي على الصفحة بحيث لا يتطابق جزء النص بعد الآن. عنوان URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. تحتوي على رابط إلى يُرجى تقديم ملاحظاتك في قسم منتديات المنتجات يحتوي على جزء من العنصر (HTML1)، بالإضافة إلى جزء من النص. (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

التوجيه الخاص بالأجزاء

هناك عنصر واحد في البنية لم أوضّحه بعد: توجيه الجزء :~:. لتجنُّب مشكلات التوافق مع أجزاء عناصر عنوان URL الموجودة كما هو موضح أعلاه، تقدّم مواصفات أجزاء النص الجزء التوجيه. توجيه الجزء هو جزء من أجزاء عنوان URL المفصول بينها بتسلسل الرموز :~: محجوزة لتعليمات وكيل المستخدم، مثل text=، وتتم إزالتها من عنوان URL أثناء التحميل بحيث لا يمكن للنصوص البرمجية للمؤلف التفاعل معه مباشرةً. تعليمات وكيل المستخدم هي وتسمى أيضًا التوجيهات. وفي الحالة الملموسة، تُسمى text= توجيه نصي.

رصد الميزات

لاكتشاف التوافق، اختبِر السمة fragmentDirective للقراءة فقط على document. الجزء هو آلية تتيح لعناوين URL تحديد التعليمات الموجّهة إلى المتصفح بدلاً من جلسة المراجعة. ويهدف إلى تجنب التفاعل المباشر مع النص البرمجي للمؤلف، بحيث يمكن لوكيل المستخدم في المستقبل التي يمكن إضافتها بدون الخوف من إدخال تغييرات قد تؤدي إلى أعطال في المحتوى الحالي. وَاحِدْ كمثال محتمل على هذه الإضافات المستقبلية، أي تعديلات الترجمة.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

تهدف ميزة رصد الميزات بشكل أساسي إلى الحالات التي يتم فيها إنشاء الروابط بشكل ديناميكي (على سبيل المثال، عن طريق محركات البحث) لتجنب عرض روابط إلى متصفحات لا تتوافق مع أجزاء النص.

تغيير نمط أجزاء النص

بشكل افتراضي، تحدد المتصفحات أجزاء النص بالطريقة نفسها التي يتم بها نمطها mark (عادةً ما يكون اللون الأسود على الأصفر، ألوان نظام CSS لـ mark). تحتوي ورقة أنماط وكيل المستخدم على لغة CSS التي تبدو على النحو التالي:

:root::target-text {
  color: MarkText;
  background: Mark;
}

كما ترى، يعرض المتصفّح أداة اختيار زائفة ::target-text التي يمكنك استخدامها تخصيص التظليل المطبق. على سبيل المثال، يمكنك تصميم أجزاء النص لتكون سوداء نص على خلفية حمراء. كما هو الحال دائمًا، تأكد من التحقّق من تباين الألوان لكي لا يتسبب نمط الإلغاء في حدوث مشاكل في إمكانية الوصول، واحرص على تبرز بصريًا عن بقية المحتوى.

:root::target-text {
  color: black;
  background-color: red;
}

قابلية الملء

يمكن تعويض ميزة أجزاء النص إلى حد ما. نحن نقدم polyfill، والذي يتم استخدامه داخليًا من خلال الإضافة، للمتصفحات التي لا توفير دعم مدمج للأجزاء النصية التي يتم فيها تنفيذ الوظيفة باستخدام JavaScript.

إنشاء رابط لأجزاء من نص برمجي

يحتوي polyfill على ملف. fragment-generation-utils.js التي يمكنك استيرادها واستخدامها لإنشاء روابط أجزاء نصية. هذا هو في نموذج التعليمات البرمجية أدناه:

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

الحصول على أجزاء نصية لأغراض متعلقة بالإحصاءات

تستخدم الكثير من المواقع الإلكترونية هذا الجزء للتوجيه، ولهذا السبب تزيل المتصفحات "أجزاء النص" حتى لا يتم تقسيم تلك الصفحات. تتوفر الحاجة المُعترف بها لعرض روابط أجزاء النص في الصفحات، لأغراض التحليل مثلاً، ولكن لم يتم تنفيذ الحل المقترح بعد. كحل بديل في الوقت الحالي، يمكنك استخدام التعليمة البرمجية أدناه لاستخراج المعلومات المطلوبة.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

الأمان

يتم استدعاء توجيهات أجزاء النص فقط في عمليات التنقل الكاملة (غير نفسها في الصفحة) الناتجة عن a تفعيل حساب المستخدِم. إضافةً إلى ذلك، ستتطلّب عمليات التنقّل التي تنشأ من مصدر مختلف عن الوجهة التنقل أن يتم في سياق noopener، مثل أن تكون الصفحة المقصودة معزولة بشكل كافٍ تعد توجيهات أجزاء النص فقط تطبيقها على الإطار الرئيسي. وهذا يعني أنّه لن يتم البحث عن النص داخل إطارات iframe وiframe. فلن يؤدي التنقل إلى استدعاء جزء من النص.

الخصوصية

من المهم ألا تؤدي تنفيذ مواصفات أجزاء النص إلى تسريب ما إذا كان النص تم العثور على جزء في الصفحة أم لا. وفي حين أن أجزاء العنصر تخضع بالكامل لتحكم مؤلف الصفحة الأصلية، يمكن لأي شخص إنشاء أجزاء النص. تذكر كيف في المثال أعلاه فلم تتوفّر طريقة للربط بعنوان وحدات ECMAScript في Web Workers، حيث أنّ <h1> ليس لديه id، ولكن كيف يمكن لأي شخص، بما فيهم أنا، الارتباط بأي مكان عن طريق صياغة جزء النص؟

تخيل أنّني تشغيل شبكة إعلانات شريرة evil-ads.example.com. تخيل أيضًا أنه في أحد إعلاناتي إطارات iframe التي أنشأتُ إطار iframe مخفيًا من مصادر متعددة إلى dating.example.com باستخدام نص عنوان URL للجزء dating.example.com#:~:text=Log%20Out بعد تفاعل المستخدِم مع الإعلان إذا ظهرت عبارة "تسجيل الخروج" أعلم أنّ الضحية هي الضحية في الوقت الحالي سجّلت الدخول إلى dating.example.com، والذي يمكنني استخدامه لتحليل بيانات المستخدم. نظرًا لأن النص الساطع قد يقرر تنفيذ الأجزاء أن المطابقة الناجحة يجب أن تؤدي إلى تبديل التركيز، على evil-ads.example.com تمكّنتُ من الاستماع إلى حدث "blur" وبالتالي معرفة وقت حدوث المطابقة. ضِمن في Chrome، نفذنا أجزاء من النص بطريقة لا يمكن أن يحدث بها السيناريو أعلاه.

قد يتمثل هجوم آخر في استغلال حركة بيانات الشبكة استنادًا إلى موضع التمرير. افترض أنني تمكنت من الوصول إلى سجلات حركة بيانات الشبكة للضحية، مثل المسؤول عن الشبكة الداخلية للشركة. الآن تخيل الأمر وجود مستند طويل للموارد البشرية بعنوان ماذا تفعل إذا كنت تعاني من... ثم قائمة حالات مثل الإرهاق والقلق، وما إلى ذلك. يمكنني وضع بكسل تتبع بجانب كل عنصر على الحالية. إذا حددت حينها أن تحميل المستند تتم مؤقتًا مع تحميل ملف إلى جانب العنصر انهاك، يمكنني بعد ذلك، بصفتي مسؤول الشبكة الداخلية، تحديد أن نقر موظف على رابط مجزأ نصي بالرمز :~:text=burn%20out، على أن افترضت أنه سري وغير مرئي لأي شخص. نظرًا لأن هذا المثال مرتبط إلى حد ما قد تم طرحها للبدء، وبما أن استغلالها يتطلب استيفاء شروط مسبقة جدًا، قيّم فريق أمان Chrome خطر استخدام ميزة الانتقال للأعلى أو للأسفل في صفحة التنقّل حتى تكون قابلة للإدارة. وقد يقرر وكلاء المستخدم الآخرون عرض عنصر التمرير اليدوي في واجهة المستخدم بدلاً من ذلك.

بالنسبة إلى المواقع الإلكترونية التي تريد إيقاف هذه الميزة، يتيح Chromium سياسة المستندات التي يمكنهم إرسالها حتى لا يعالج وكلاء المستخدم عناوين URL لأجزاء نصية.

Document-Policy: force-load-at-top

إيقاف أجزاء النص

وتتمثل أسهل طريقة لإيقاف الميزة في استخدام إضافة يمكنها إدخال استجابة HTTP. العناوين، على سبيل المثال، ModHeader (ليس أحد منتجات Google)، لإدراج عنوان استجابة (ليس طلب) على النحو التالي:

Document-Policy: force-load-at-top

وهناك طريقة أخرى أكثر تعمقًا للإيقاف، وهي استخدام إعدادات المؤسسة ScrollToTextFragmentEnabled لإجراء ذلك على نظام التشغيل macOS، الصِق الأمر أدناه في الوحدة الطرفية.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

في نظام التشغيل Windows، اتبع المستندات الموجودة في دعم مساعدة Google Chrome Enterprise موقعك.

الأجزاء النصية في بحث الويب

بالنسبة إلى بعض عمليات البحث، يوفر محرك البحث Google إجابة سريعة أو ملخصًا لمحتوى مقتطف من موقع ويب ذي صلة. من المرجّح أن تظهر هذه المقتطفات المميّزة عند إجراء عملية بحث. في شكل سؤال. يؤدي النقر على مقتطف مميَّز إلى نقل المستخدم مباشرةً إلى المقتطف المميَّز. نص المقتطف في صفحة الويب المصدر. ويعود الفضل في ذلك إلى عناوين URL للأجزاء النصية التي يتم إنشاؤها تلقائيًا.

الخاتمة

عنوان URL للأجزاء النصية هو ميزة قوية للربط بنص عشوائي على صفحات الويب. العلمي يمكن للمجتمع استخدامها في تقديم اقتباسات أو روابط مرجعية دقيقة للغاية. يمكن لمحرّكات البحث استخدام لإنشاء رابط لموضع معيّن في النتائج النصية على الصفحات. يمكن لمواقع الشبكات الاجتماعية استخدامها للسماح للمستخدمين بمشاركة فقرات محددة من صفحة الويب بدلاً من لقطات شاشة لا يمكن الوصول إليها. أتمنى أن تبدأ باستخدام عناوين URL لأجزاء نصيّة وأجدها مفيدة بقدر ما أفعل. تأكد من تثبيت رابط إلى متصفِّح "جزء النص" الإضافة.

روابط ذات صلة

• مسودة المواصفات
• مراجعة TAG
• إدخال حالة النظام الأساسي في Chrome
• خطأ التتبُّع في Chrome
• نيّة شحن سلسلة المحادثات
• سلسلة محادثات WebKit-Dev
• سلسلة محادثات موضع المعايير في Mozilla

شكر وتقدير

تم تنفيذ "أجزاء نصية" وتحديدها من قِبل Nick Burris "ديفيد بوكان"، مع مساهمات من غرانت وانغ. شكرًا لـ جو مدلي على مراجعة هذه المقالة الشاملة صورة رئيسية من تصميم غريغ راكوزي على إزالة البداية