حل لرسائل Firefox الإنجليزية بدون خطوط التغليف

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

في مسودة CSS3 ، تتم إضافة خصائصان جديدان وراثة الكلمات والكلمات إلى معالجة النص لحل هذه المشكلة:

1. {word-wrap: break-word ؛}: وفقًا لقواعد النص للغات الآسيوية وغير الآسيوية ، يُسمح باللفائف الخطية داخل الأحرف ، ويسمح لأي شخصيات في خطوط نصية باللغة غير الآسيوية إلى كسرها داخل الأحرف التعسفية.
2. {Word-Break: Break-All ؛}: سيتم كسر المحتوى داخل الحدود ، إذا لزم الأمر ، سيحدث كسر الكلمة أيضًا.

فيما يلي حالات الدعم للمتصفحات الشائعة:

• [1] في توافق CSS الخاص بـ MSDN و Internet Explorer ، يمكن ملاحظة أن IE8 ستدعم كل من Word-Wrap و Word-Break مثل IE6 و IE7 ، لكنني لم أؤيد هذين العنصرين بعد الاختبار على IE8Beta2. نظرًا لأن IE8 لا يزال في مرحلة الإصدار التجريبي وأعتقد أن IE8 ستدعمها في النهاية ، فهي طريقة جيدة لإعلان <meta content="IE=7" http-equiv="X-UA-Compatible" /> في الرأس لجعل IE8 تفسير الصفحة وفقًا لـ ie7.
• [2] سوف يدعم Firefox 3.1 سمة Word-Wrap

نظرًا لأن {Word-Break: Break-All ؛} يتسبب في قابلية القراءة الشديدة في اللغة الإنجليزية والرقم والفشل في لف الرموز المتتالية ، {Word-Wrap: Break-word ؛} هو اختيار جيد نسبيًا.

ومع ذلك ، في مواجهة هذا الدعم الضعيف من المتصفح ، لا يمكننا حل هذه المشكلة دون استخدام JavaScript. هذا هو ، عندما لا يدعم المتصفح حل CSS ، أدخل أحرف "8203" في الموضع المناسب للسلسلة المستمرة (بالطبع يمكنك أيضًا استخدام <wbr /> و "خجول ؛

 function fnBreakWordAll(o){
 var o = o || {} ،
 iWORD = O.Word || 13 ،
 IRE = O.RE || "[A-ZA-Z0-9]" ،
 الكرة = O. All || خطأ شنيع،
 sclassName = O.ClassName || 'Word-break-all' ،
 AELS = O.ELS || (وظيفة(){
 var aels = [] ،
 aallels = document.getElementsbyTagname ('*') ،
 re = new regexp ('(؟:^| // s +)' + sclassName + '(؟: // s + | $)') ؛
 لـ (var i = 0 ، ilen = aallels.length ؛ i <ilen ؛ ++ i) {
 if (re.test (aallels [i] .classname)) {
 aels [aels.length] = aallels [i] ؛
 }
 }
 إرجاع AELS.
 }) () || [] ،
 fnbreakword = function (oel) {
 // تعديل استنادًا إلى http://www.hedgerwow.com/360/dhtml/css-word-break.html
 if (! oel || oel.nodeType! == 1) {
 العودة كاذبة
 } آخر إذا (oel.currentStyle && typeof oel.currentstyle.wordwrap === 'string') {
 BreakWord = Function (OEL) {
 oel.runtimestyle.wordwrap = 'break-word' ؛
 العودة صحيح.
 }
 عودة الكلمة (OEL) ؛
 } آخر إذا (document.createTreewalker) {
 var trim = function (str) {
 str = str.replace (/^/s/s*/، '') ؛
 var ws = // s/،
 i = str.length ؛
 بينما (Ws.Test (str.charat (-i))) ؛
 إرجاع str.slice (0 ، i + 1) ؛
 }
 BreakWord = Function (OEL) {
 var dwalker = document.createTreewalker (OEL ، Nodefilter.show_text ، null ، false) ؛
 var node ، s ، c = string.fromcharcode ('8203') ،
 // re =/([a-za-z0-9] {0،13})/؛
 re = new regexp ('(' + ire + '{0 ،' + iword + '})') ؛
 بينما (dwalker.nextNode ()) {
 العقدة = dwalker.currentNode ؛
 s = trim (node.nodevalue) .split (re). join (c) ؛
 node.nodevalue = s ؛
 }
 العودة صحيح.
 }
 عودة الكلمة (OEL) ؛
 }
 } ؛
 لـ (var i = 0 ، n = aels.length ؛ i <n ؛ ++ i) {
 var sua = navigator.useragent ،
 stn = aels [i] .tagname.toLowerCase () ؛
 if ((/opera/)
 (stn ​​=== 'td' || stn === 'th')) || كرة){
 fnbreakword (aels [i]) ؛
 }
 }
 }

لتطبيقات محددة ، يرجى الاطلاع على المثال التجريبي

توفر وظيفة FNWORDBREAKALL بعض المعلمات المخصصة ، وتكون أساليب الاستخدام والمعلمات كما يلي:

 fnWordBreakAll({word:15,re:'[//w]',all:true});

تم تعديل الجزء الأساسي من هذه الوظيفة من Hedger Wang. تم تجميع حل JavaScript "Cross Browser Word Breaker". يستخدم document.createTreewalker و SPLICE أساليب لإضافة "#8203" إلى كل حرف في متصفحات غير IE. لا توجد مشكلة في الأساس عند استخدامها في النص الصيني الخالص ، ولكن إذا لاحظت الأمثلة التي يعطيها ، فستجد أنه عندما يكون هناك إنجليزي أو أرقام في النص ، على الرغم من أنه يحل مشكلة كسر الخط ، فإنه يجعل النص صعبًا ويزيد من التباعد بين الشخصيات ، لذلك قمت بإجراء التحسينات المذكورة أعلاه بناءً على ذلك.