تتيح لك الأجزاء النصية تحديد مقتطف نصي في جزء عنوان URL. عند الانتقال إلى عنوان URL يحتوي على جزء من النص، يمكن للمتصفح التأكيد على ذلك العنوان و/أو لفت انتباهه إليه.
معرّفات الأجزاء
كان Chrome 80 إصدارًا كبيرًا. وتضمّنت هذه السلسلة عددًا من الميزات المرتقبة، مثل وحدات ECMAScript في Web Workers والدمج الفارغ والتسلسل الاختياري وغير ذلك. وكالعادة، تم الإعلان عن الإصدار من خلال مشاركة مدونة في مدونة Chromium. يمكنك الاطّلاع على مقتطف من مشاركة المدوّنة في لقطة الشاشة أدناه.
![](https://web.dev/static/articles/text-fragments/image/egsW6tkKWYI8IHE6JyMZ.png?authuser=6&hl=ar)
id
ربما تسأل نفسك عما تعنيه جميع المربعات الحمراء. وهي نتيجة عرض المقتطف التالي
في "أدوات مطوري البرامج". وهي تُميِّز جميع العناصر التي تحتوي على السمة 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
.
![](https://web.dev/static/articles/text-fragments/image/whVXhhrYwA55S3i4J3l5.png?authuser=6&hl=ar)
id
لأحد العناصرإذا حللت عنوان 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
في عمال الويب. كما هو موضّح في لقطة الشاشة أدناه، لا يتضمّن عنوان <h1>
المعنيّ السمة id
، ما يعني أنّه لا توجد طريقة يمكنني من خلالها الربط بهذا العنوان. هذه هي المشكلة التي
تحلها الأجزاء النصية.
![](https://web.dev/static/articles/text-fragments/image/1g4rTS1q5LKHEHnDoF9o.png?authuser=6&hl=ar)
id
.أجزاء النص
يتيح عرض الأجزاء النصية تحديد مقتطف نصي في تجزئة عنوان URL. عند الانتقال إلى عنوان URL يتضمّن جزءًا من النص، يمكن لوكيل المستخدم التأكيد عليه و/أو لفت انتباهه إليه.
توافُق المتصفح
لأسباب الأمان، تتطلّب الميزة فتح الروابط في سياق noopener
.
لذلك، تأكَّد من تضمين العلامة rel="noopener"
في ترميز علامة الارتساء <a>
أو إضافة noopener
إلى قائمة ميزات وظائف النوافذ في Window.open()
.
start
إنّ بنية "الأجزاء النصية" في أبسط أشكالها تكون على النحو التالي: رمز التجزئة #
متبوعًا بـ :~:text=
، وأخيرًا start
، الذي يمثّل النص المُرمّز بنسبة مئوية الذي أريد الربط به.
#:~:text=start
لنفترض مثلاً أنني أريد إنشاء رابط يؤدي إلى وحدات ECMAScript في عمال الويب في مشاركة المدونة التي تعلن عن ميزات في إصدار Chrome 80، وسيكون عنوان URL في هذه الحالة هو:
يتم التأكيد على جزء النص هكذا. إذا نقرت على الرابط في متصفح متوافق مثل Chrome، سيتم تمييز جزء النص وسيتم تمريره لعرضه:
![](https://web.dev/static/articles/text-fragments/image/D3jwPrJlvN3FmJo3pADt.png?authuser=6&hl=ar)
start
وend
ماذا لو أردتُ الربط بالقسم بأكمله بعنوان وحدات ECMAScript في Web Workers، وليس فقط بعنوانه؟ يؤدي ترميز النص الكامل للقسم إلى جعل عنوان URL الناتج طويلاً بشكل غير عملي.
لحسن الحظ، هناك طريقة أفضل. بدلاً من النص بأكمله، يمكنني وضع إطار للنص المطلوب باستخدام بنية start,end
. لذلك، أحدد بضع كلمات تم ترميزها بنسبة مئوية في بداية النص المطلوب، وبضعة كلمات تم ترميزها بنسبة مئوية في نهاية النص المطلوب، مع الفصل بينها بفاصلة ,
.
يبدو ذلك كالتالي:
بالنسبة إلى start
، لديّ ECMAScript%20Modules%20in%20Web%20Workers
، ثم فاصلة ,
متبوعة
بـ ES%20Modules%20in%20Web%20Workers.
على أنّها end
. عند النقر على متصفح متوافق مثل Chrome، يتم تمييز القسم بأكمله وتمريره لعرضه:
![](https://web.dev/static/articles/text-fragments/image/2yTYmKnjHTnqXkcmHF1F.png?authuser=6&hl=ar)
قد تتساءلون الآن عن اختياري لـ 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
الحالية المكوّنة من كلمة واحدة:
![](https://web.dev/static/articles/text-fragments/image/GGbbtHBpsoFyubnISyZw.png?authuser=6&hl=ar)
prefix-
و-suffix
ويُعدّ استخدام قيم طويلة بما يكفي للسمتَين start
وend
أحد الحلول للحصول على رابط فريد.
ومع ذلك، قد لا يكون ذلك ممكنًا في بعض الحالات. في ملاحظة جانبية، لماذا اخترت مشاركة مدونة
إصدار Chrome 80 كمثال؟ الإجابة هي أنه تم تقديم أجزاء
نصية في هذا الإصدار:
![نص مشاركة المدونة: أجزاء نص عنوان URL. يمكن للمستخدمين أو المؤلفين الآن الارتباط بجزء معيّن من الصفحة باستخدام جزء نصي مقدَّم في عنوان URL. عند تحميل الصفحة، يميِّز المتصفح النص ويمرر الجزء إلى أن يظهر. على سبيل المثال، يقوم عنوان URL أدناه بتحميل صفحة wiki لـ "Cat" وينتقل إلى المحتوى المدرج في المعلمة `text`.](https://web.dev/static/articles/text-fragments/image/blog-post-text-text-url-67d2c112b0147.png?authuser=6&hl=ar)
لاحظ كيف تظهر الكلمة "نص" أربع مرات في لقطة الشاشة. تتم كتابة موضع الورود الرابع
بخط تعليمة برمجية أخضر. إذا أردتُ الربط بهذه الكلمة تحديدًا، سأضبط start
على text
. بما أنّ كلمة "نص" هي كلمة واحدة فقط، لا يمكن استخدام end
. ما هي الإجراءات المطلوب اتّخاذها؟ يتطابق
عنوان URL
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text
في أول مرة ورود لكلمة "نص" في العنوان:
![](https://web.dev/static/articles/text-fragments/image/nXxCskUwdCxwxejPSSZW.png?authuser=6&hl=ar)
لحسن الحظ، هناك حل. في مثل هذه الحالات، يمكنني تحديد prefix-
و-suffix
. الكلمة التي تسبق خط التعليمة البرمجية الأخضر "text" هي "the"، والكلمة التي تليها هي "parameter". لا يحتوي أي من التكرارات الثلاثة الأخرى
لكلمة "نص" على نفس الكلمات المحيطة. واستنادًا إلى هذه المعلومات، يمكنني تعديل عنوان URL السابق وإضافة prefix-
و-suffix
. وعلى غرار المَعلمات الأخرى، يجب أيضًا أن يتم ترميزها بنسبة مئوية ويمكن أن تحتوي على أكثر من كلمة واحدة.
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter
.
للسماح للمحلّل اللغوي بتحديد prefix-
و-suffix
بوضوح، يجب فصلهما عن start
والسمة end
الاختيارية باستخدام شرطة -
.
![](https://web.dev/static/articles/text-fragments/image/J3L5BVSMmzGY6xdkabP6.png?authuser=6&hl=ar)
البنية الكاملة
يتم توضيح بناء الجملة الكامل للأجزاء النصية أدناه. (تشير الأقواس المربعة إلى معلمة اختيارية).
يجب أن يتم ترميز قيم جميع المعلمات بنسبة مئوية. ويُعدّ هذا الإجراء مهمًا بشكل خاص لأحرف الشرطة
-
وعلامة العطف &
والفاصلة ,
، لذا لا يتم تفسيرها كجزء من
بنية توجيهية نصية.
#:~:text=[prefix-,]start[,end][,-suffix]
سيعمل كل من prefix-
وstart
وend
و-suffix
على مطابقة نص داخل
عنصر واحد على مستوى الحظر فقط،
ولكن يمكن أن تمتد النطاقات البالغ عددها start,end
الكاملة يمكن أن تشمل وحدات متعددة. على سبيل المثال،
لن تتطابق السمة :~:text=The quick,lazy dog
في المثال التالي، لأنّ سلسلة البدء "السرعة" لا تظهر ضمن عنصر واحد غير منقطع على مستوى الحظر:
<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
![](https://web.dev/static/articles/text-fragments/image/ASLtFCPoHvyTKrAtKAv4.png?authuser=6&hl=ar)
أجزاء نصية متعددة في عنوان 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
.
![](https://web.dev/static/articles/text-fragments/image/ffsq7aoSoVd9q6r5cquY.png?authuser=6&hl=ar)
الخلط بين العناصر وأجزاء النص
يمكن دمج أجزاء العناصر التقليدية مع أجزاء النص. من الجيد تمامًا أن يكون لديك كلاهما في عنوان 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.
):
![](https://web.dev/static/articles/text-fragments/image/JRKCM6Ihrq8sgRZRiymr.png?authuser=6&hl=ar)
التوجيه الخاص بالأجزاء
هناك عنصر واحد في البنية لم أشرحه بعد، وهو توجيه الجزء :~:
. لتجنّب مشاكل التوافق مع أجزاء عناصر عنوان URL الحالية كما هو موضّح أعلاه، تقدّم مواصفات الأجزاء النصية توجيهًا للأجزاء. توجيه الجزء هو جزء من جزء عنوان URL المفصول بتسلسل الرمز
:~:
. إنّها محفوظة لتعليمات وكيل المستخدم، مثل text=
، وتتم إزالتها من عنوان URL
أثناء التحميل لكي لا تتفاعل النصوص البرمجية للمؤلّف معه مباشرةً. تُسمّى تعليمات وكيل المستخدم
أيضًا التوجيهات. ولذلك، يُطلق على text=
اسم التوجيه النصي في الحالة الملموسة.
رصد الميزات
لاكتشاف الدعم، اختبِر سمة fragmentDirective
للقراءة فقط في document
. التوجيه المجزأ هو آلية تستخدم عناوين URL لتحديد التعليمات الموجّهة إلى المتصفّح بدلاً من المستند. وهي تهدف إلى تجنُّب التفاعل المباشر مع النص البرمجي للمؤلف، ما يتيح إضافة تعليمات وكيل المستخدم المستقبلية بدون القلق من إجراء تغييرات قد تؤدي إلى تعطُّل المحتوى الحالي. قد تكون تلميحات الترجمة أحد الأمثلة
المحتملة على هذه الإضافات المستقبلية.
if ('fragmentDirective' in document) {
// Text Fragments is supported.
}
تم تصميم ميزة "رصد الميزات" بشكل أساسي للحالات التي يتم فيها إنشاء الروابط ديناميكيًا (على سبيل المثال، بواسطة محرّكات البحث) لتجنُّب عرض أجزاء نصية مرتبطة بالمتصفّحات غير المتوافقة معها.
تصميم أجزاء النص
يتم تلقائيًا وضع أنماط على أجزاء من النص في المتصفحات بالطريقة نفسها التي يتم بها استخدام
mark
(عادةً باللون الأسود على الأصفر،
وألوان نظام CSS الخاصة بـ 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;
الأمان
لا يتم استدعاء توجيهات أجزاء النص إلا في عمليات التنقّل الكاملة (التي ليست من الصفحة نفسها) والتي تكون نتيجة
تفعيل المستخدِم.
بالإضافة إلى ذلك، ستتطلّب عمليات التنقّل التي تنشأ من مصدر مختلف عن الوجهة أن يتم التنقّل في سياق 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 للأجزاء التي يتم إنشاؤها تلقائيًا.
![](https://web.dev/static/articles/text-fragments/image/KbZgnGxZOOymLxYPZyGH.png?authuser=6&hl=ar)
![](https://web.dev/static/articles/text-fragments/image/4Q7zk9xBnb2uw8GRaLnU.png?authuser=6&hl=ar)
الخلاصة
عنوان URL للأجزاء النصية هو ميزة فعالة للربط بنص عشوائي على صفحات الويب. يمكن لمنتدى العلماء استخدامه لتقديم روابط اقتباس أو مرجعية دقيقة للغاية. يمكن لمحركات البحث استخدامها لإنشاء رابط لموضع معيّن في النتائج النصية على الصفحات. يمكن لمواقع الشبكات الاجتماعية استخدامها للسماح للمستخدمين بمشاركة مقاطع محددة من صفحة الويب بدلاً من لقطات الشاشة التي يتعذر الوصول إليها. آمل أن تبدأ باستخدام عناوين URL للجزء النصي وأن تجدها مفيدة مثلي. تأكد من تثبيت إضافة المتصفح رابط إلى جزء النص.
روابط ذات صلة
- مسودة المواصفات
- مراجعة TAG
- إدخال حالة النظام الأساسي Chrome
- خطأ في تتبُّع Chrome
- هدف شحن سلسلة المحادثات
- سلسلة محادثات WebKit-Dev
- سلسلة محادثات الموضع القياسي لمتصفِّح Mozilla
شكر وتقدير
تم تنفيذ الأجزاء النصية وتحديدها من قِبل Nick Burris وديفيد بوكان، بالإضافة إلى مساهمات من غرانت وانغ. نشكر جو ميدلي على مراجعة هذه المقالة الشاملة. صورة رئيسية من تصوير غريغ راكوزي على قناة UnLaunch