html tutorial CSS: تحويل النص لا يعمل بشكل صحيح للأحرف التركية




wbr tag in html5 example (7)

يبدو أن تطبيقات المستعرضات الرئيسية تواجه مشكلات text-transform: uppercase مع text-transform: uppercase التركية. على حد علمي (أنا لست تركي) ، هناك أربعة أحرف مختلفة: ı i I İ حيث يمثل الأخيران تمثيلًا كبيرًا للأحرفتين السابقتين.

على الرغم من تطبيق text-transform:uppercase على ı i ، فإن المتصفحات (التي تم تحديدها في IE و Firefox و Chrome و Safari) تؤدي إلى II غير صحيحة وقد تغير معنى الكلمات كثيرًا بحيث تصبح اهانات. (هذا ما قيل لي)

نظرًا لأن بحثي عن الحلول لم يكشف عن أي سؤالي هو: هل هناك حلول لهذه المشكلة؟ قد يكون الحل الأول لإزالة text-transform: uppercase تمامًا ولكن هذا هو الملاذ الأخير.

شيء مضحك ، W3C لديه اختبارات لهذه المشكلة على موقعهم ، ولكن عدم وجود مزيد من المعلومات حول هذه المشكلة. http://www.w3.org/International/tests/tests-html-css/tests-text-transform/generate?test=5

أقدر أي مساعدة وأتطلع إلى إجاباتك :-)

وهنا codepen


يحتوي الإصدار التالي من Firefox Nightly (والذي يجب أن يصبح Firefox 14) على إصلاح لهذه المشكلة ويجب أن يتعامل مع الحالة دون أي اختراق (كما تطلبها CSS3).

تفاصيل gory متوفرة في هذا الخطأ: https://bugzilla.mozilla.org/show_bug.cgi?id=231162

لقد قاموا أيضًا بإصلاح مشكلة متغير الخطوط على ما أعتقد (بالنسبة لأولئك الذين لا يعرفون ما يقوم به متغير الخط ، راجع https://developer.mozilla.org/en/CSS/font-variant ، وليس محدّثًا حتى الآن مع تغيير لكن المستند غير مستعرض ويكي ، لذلك ...)


يجب أن يكون السبب الجذري لهذه المشكلة هو المعالجة غير الصحيحة لهذه الأحرف التركية بواسطة مكتبة يونيكود المستخدمة في جميع هذه المتصفحات. لذلك أنا أشك في أن هناك إصلاح الجانب الأمامي لهذا الغرض.

يتعين على شخص ما الإبلاغ عن هذه المشكلة لمطوري هذه الكودات unicode ، وسيتم إصلاحها في غضون أسابيع / أشهر قليلة.


إليك مثال سريع وسريع للمشكلة - إنه أسرع مما كنت أعتقد (تم اختباره في مستند به 2400 علامة -> بدون تأخير). لكني أرى أن حلول js ليست الحل الأفضل

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-3">
</head>
<body>
<div style="text-transform:uppercase">a b c ç d e f g ğ h ı i j k l m n o ö p r s ş t u ü v y z (source)</div> <div>A B C Ç D E F G Ğ H I İ J K L M N O Ö P R S Ş T U Ü V Y Z (should be like this)</div>

<script>
    function getStyle(element, style) {
        var result;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            result = document.defaultView.getComputedStyle(element, '').getPropertyValue(style);
        } else if(element.currentStyle) {
            style = style.replace(/\-(\w)/g, function (strMatch, p1) {
                return p1.toUpperCase();
            });
            result = element.currentStyle[style];
        }
        return result;
    }

    function replaceRecursive(element) {
        if (element && element.style && getStyle(element, 'text-transform') == 'uppercase') {
            element.innerHTML = element.innerHTML.replace(/ı/g, 'I');
            element.innerHTML = element.innerHTML.replace(/i/g, 'İ');    // replaces 'i' in tags too, regular expression should be extended if necessary
        }

        if (!element.childNodes || element.childNodes.length == 0) return;

        for (var n in element.childNodes) {
            replaceRecursive(element.childNodes[n]);
        }
    }

    window.onload = function() {    // as appropriate 'ondomready'
        alert('before...');
        replaceRecursive(document.getElementsByTagName('body')[0]);
        alert('...after');
    }
</script>

</body>
</html>

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


يمكنك حل هذا باستخدام javascript الأصلي أيضًا:

هنا أيضا جوهره.

String.prototype.turkishToLower = function(){
  var string = this;
  var letters = { "İ": "i", "I": "ı", "Ş": "ş", "Ğ": "ğ", "Ü": "ü", "Ö": "ö", "Ç": "ç" };
  string = string.replace(/(([İIŞĞÜÇÖ]))/g, function(letter){ return letters[letter]; })
  return string.toLowerCase();
}

String.prototype.turkishToUpper = function(){
  var string = this;
  var letters = { "i": "İ", "ş": "Ş", "ğ": "Ğ", "ü": "Ü", "ö": "Ö", "ç": "Ç", "ı": "I" };
  string = string.replace(/(([iışğüçö]))/g, function(letter){ return letters[letter]; })
  return string.toUpperCase();
}

var text = 'iii';
text = text.turkishToUpper();
console.log(text);


يمكنك إضافة سمة lang وتعيين قيمتها إلى tr لحل هذا:

<html lang="tr"> أو <div lang="tr">

هنا يعمل المثال.


إليكم نسخة محسنة من كود alex الذي أستخدمه في الإنتاج:

(function($) {
  function getStyle(element, style) {
    var result;

    if (document.defaultView && document.defaultView.getComputedStyle) {
      result = document.defaultView.getComputedStyle(element, '').getPropertyValue(style);
    } else if(element.currentStyle) {
      style = style.replace(/\-(\w)/g, function (strMatch, p1) {
        return p1.toUpperCase();
      });
      result = element.currentStyle[style];
    }
    return result;
  }

  function replaceRecursive(element, lang) {
    if(element.lang) {
      lang = element.lang; // Maintain language context
    }

    if (element && element.style && getStyle(element, 'text-transform') == 'uppercase') {
      if (lang == 'tr' && element.value) {
        element.value = element.value.replace(/ı/g, 'I');
        element.value = element.value.replace(/i/g, 'İ');
      }

      for (var i = 0; i < element.childNodes.length; ++i) {
        if (lang == 'tr' && element.childNodes[i].nodeType == Node.TEXT_NODE) {
          element.childNodes[i].textContent = element.childNodes[i].textContent.replace(/ı/g, 'I');
          element.childNodes[i].textContent = element.childNodes[i].textContent.replace(/i/g, 'İ');
        } else {
          replaceRecursive(element.childNodes[i], lang);
        }
      }
    } else {
      if (!element.childNodes || element.childNodes.length == 0) return;

      for (var i = 0; i < element.childNodes.length; ++i) {
        replaceRecursive(element.childNodes[i], lang);
      }
    }
  }

  $(document).ready(function(){ replaceRecursive(document.getElementsByTagName('html')[0], ''); })
})(jQuery);

لاحظ أنني أستخدم jQuery هنا فقط للدالة ready() . يعد برنامج توافق jQuery أيضًا وسيلة ملائمة لمساحة الوظائف. بخلاف ذلك ، لا تعتمد الوظيفتان على jQuery على الإطلاق ، لذا يمكنك سحبهما.

مقارنة بالإصدار الأصلي من alex ، هذا واحد يحل مشاكل الزوجين:

  • تقوم بتتبع سمة lang أثناء تكرارها ، لأنه إذا قمت بمزج محتوى تركي ومحتوى لاتيني آخر ، فستحصل على تحويلات غير مناسبة على اللغة غير التركية بدونها. وفقًا لهذا ، مرر عنصر html الأساسي ، وليس body . يمكنك lang="en" على أي علامة ليست تركية لمنع الكتابة بالأحرف الكبيرة غير الصحيحة.

  • يتم تطبيق التحويل فقط على TEXT_NODES لأن الطريقة TEXT_NODES السابقة لم تعمل مع العقد المختلطة النص / العناصر مثل التسميات مع النص وخانات الاختيار داخلها.

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





lang