Xterm.js: ارسم يدويًا صورًا رمزية مثالية للبكسل لأحرف Box Drawing و Block Elements

تم إنشاؤها على ١٠ سبتمبر ٢٠١٩ · 24تعليقات · مصدر: xtermjs/xterm.js

تفاصيل

إصدار المتصفح والمتصفح: Chrome 76.0.3809.132 (64 بت) ، FireFox 69.0 (64 بت)
إصدار نظام التشغيل: Windows 7 Pro 64 بت
إصدار xterm.js: ^ 3.14.5

خطوات التكاثر

index.html:

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
    <script src="node_modules/xterm/dist/xterm.js"></script>
</head>

<body>
    <div id="terminal"></div>
    <script>
        var options = {
            rows: 30,
            cols: 80,
            fontFamily: '"Courier New", "DejaVu Sans Mono", "Everson Mono", FreeMono, "Andale Mono", monospace',
            fontSize: 12,
            convertEol: true
        };
        var term = new Terminal(options);
        term.open(document.getElementById('terminal'));

        term.write('           ╔═════════════════════════════════════════════════════════╕\n');
        term.write('           ║                                                         │\n');
        term.write('           ║              ╔═══════════════╦════════╤════════╗        │\n');
        term.write('           ║              ║               ║        │        ║        │\n');
        term.write('           ║              ║               ║        │        ║        │\n');
    </script>
</body>

</html>

هناك العديد من المشكلات ذات الصلة ولكنها لا تساعد:

https://github.com/xtermjs/xterm.js/issues/475
https://github.com/xtermjs/xterm.js/issues/992

arerenderer help wanted typenhancement

مصدر

anatoly-spb

👍1

التعليق الأكثر فائدة

لقد أجريت بعض التجارب في رسم بعض الشخصيات يدويًا.
صفحة العرض التوضيحي: https://roguelike.solutions/xterm/xtermtest.html

الكود تقريبي ، ولكنه متاح هنا: https://github.com/xtermjs/xterm.js/compare/master...guregu : box-drawing

حاليًا ، يتكون المكون من جزأين ، أحدهما هو boxDrawingLineSegments والذي يستعير خوارزمية من iTerm2. تحدد 7 أنواع من نقاط الربط الرأسية والأفقية التعسفية لكل خلية شخصية وخطوط أو منحنيات تقابلها. يعمل هذا مع جميع خطوط رسم الصندوق تقريبًا ، ولكنه لا يعمل مع أحرف الخطوط المنقطة التي تتطلب المزيد من نقاط الربط. إن التحكم الدقيق في رسم الخطوط يعني أيضًا أننا لسنا بحاجة إلى القص أفقيًا لتجنب التداخل. أحاول التفكير في طريقة أفضل لتمثيلها تعمل أيضًا مع الخطوط المنقطة.
ربما بدلاً من تقسيم الخلايا إلى 7 نقاط عشوائية إلى حد ما ، يمكننا بدلاً من ذلك تحديد المواقع مثل "يسار" ، "مركز" ، "مركز ناقص n جهاز بكسل معدل البكسل" ، إلخ.
أيضًا ، iTerm2 هو GPL2 وحاولت كتابته ليكون أصليًا قدر الإمكان وتجنب مشكلات الترخيص ، لكنني لست متأكدًا من مكان رسم الخط المجازي هنا. هذا سبب آخر لاستخدام خوارزمية أصلية مربي الحيوانات. اعتبر التطبيق الحالي دليلاً على المفهوم.

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

لا أدعم حتى الآن أحرف المضلع من كتلة Symbols for Legacy Computing ، ولكن استخدام تقنيات مماثلة يجب أن يعمل معها. لست متأكدًا من كيفية الشروع في رسم أحرف الظل مثل ░ ▒ ▓ ، لكن ربما يمكن أن يكونوا بغلاف خاص. هناك أيضًا مسألة إلى أي مدى نريد أن نذهب مع هذا.

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

guregu في ٥ مايو ٢٠٢٠

❤3

ال 24 كومينتر

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

Tyriar في ١٠ سبتمبر ٢٠١٩

Tyriar كيف يمكنني مشاركة المعلومات المطلوبة؟

anatoly-spb في ١٠ سبتمبر ٢٠١٩

هل يمكنك محاولة استخدام هذا الخط ؟ يعمل كل من fontFamily و Hack بالنسبة لي على مربع Windows 10 الخاص بي.

Tyriar في ١٠ سبتمبر ٢٠١٩

لقد جربت ما يلي على جهاز Windows 10 64 بت المنزلي في متصفح Yandex (استنادًا إلى Chromium):

<!doctype html>
<html>

<head>
    <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/[email protected]/build/web/hack.css'>
    <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
    <script src="node_modules/xterm/dist/xterm.js"></script>
</head>

<body>
    <div id="terminal"></div>
    <script>
        var options = {
            rows: 30,
            cols: 80,
            fontFamily: 'Hack',
            fontSize: 12,
            convertEol: true
        };
        var term = new Terminal(options);
        term.open(document.getElementById('terminal'));

        term.write('           ╔═════════════════════════════════════════════════════════╕\n');
        term.write('           ║                                                         │\n');
        term.write('           ║              ╔═══════════════╦════════╤════════╗        │\n');
        term.write('           ║              ║               ║        │        ║        │\n');
        term.write('           ║              ║               ║        │        ║        │\n');
    </script>
</body>

</html>

ها هي النتيجة:

الشيء نفسه على Chrome:

حاولت أيضًا الطباعة في Visual Studio Code باستخدام العقدة:

anatoly-spb في ١٠ سبتمبر ٢٠١٩

لمعلوماتك: تقوم بعض المحطات الطرفية ، بما في ذلك gnome-terminal (vte) و konsole ، برسم حرف U + 2500..257F (أو حتى 259F) يدويًا ، بدلاً من أخذها من الخط ، لتوفير مظهر متصل بشكل جميل.

من قبيل الصدفة ، اتبعت كل من هذه المحاكيات أسلوبًا تقنيًا مشابهًا إلى حد كبير: حدد مظهر (معظم) هذه الحروف الرسومية على أنها صورة نقطية 5 × 5 بأحجام "بكسل" غير متساوية يتم حسابها وقت التشغيل بناءً على حجم الخط.

egmontkob في ١١ سبتمبر ٢٠١٩

egmontkob Lulz ، أتذكر القيام بذلك أيضًا في المحاكي القديم. تساءلت دائمًا عن سبب عدم إظهار xterm.js لهذا السلوك ، ولكن لم يتم التحقيق فيه مطلقًا.

لقد أجرىTyriar للتو بعض الاختبارات باستخدام خطوط مختلفة مع chrome و FF مع هذه النتائج - أرى في كل محرك مع كل خط مدرج في العرض التوضيحي مساحة صغيرة (تم اختبارها في لوحة الرسم وعارض DOM). تختلف المساحة نفسها حسب حجم الخط والخط نفسه ، FF هو بكسل واحد مع فجوة أكبر (لدينا إزاحة البكسل في FF أيضًا في أماكن / مشكلات أخرى).

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

علاوة على ذلك ، لا أرى أي فجوة في vscode (ولا حتى أبسطها ، تم اختبارها باستخدام mc ). لست متأكدًا مما يفعله vscode بشكل مختلف هنا ، فربما يمكن لإصلاح عام استعارة ذلك؟ بجانب رسم الحروف الرسومية الخاصة كما هو مقترح من قبل egmontkob ، قد نبتعد عن طريقة أبسط لـ DOM - فقط ارسم رسم لوحة الرسم على أي حال ، قد يحصل نهج

jerch في ١٢ سبتمبر ٢٠١٩

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

قد نبتعد عن نهج أبسط لـ DOM - فقط ارسم نقاط الشفرة المعنية بحجم خط أكبر قليلاً

لا نقوم ولا يجب أن نقوم بقص الخلايا في عارض DOM ، لذا لا أعتقد أن هذا خيار.

بشرط ألا تضيف الكثير من التعليمات البرمجية * ، يمكننا ترميز الحروف الرسومية الخاصة بنا لهذه 👍 ، سيكون من الجيد إذا كانت متوافقة مع عارض DOM.

* عندي شك في هذا

Tyriar في ١٢ سبتمبر ٢٠١٩

الآن بعد أن تم تمييز # 2572 على أنه مزدوج ، فإن هذا الخطأ يتعلق بالتأكيد بـ U + 2500..257F "Box Drawing" و U + 2580..259F "Block Elements" أيضًا.

راقب أيضًا (Unicode 13) القادمة U + 1FB00 "رموز الحوسبة القديمة" ، انظر على سبيل المثال VTE 189 .

egmontkob في ٢٢ نوفمبر ٢٠١٩

👍1

egmontkob Lol ، أعتقد أن تلك الصور الرمزية الجديدة تهدف إلى التوافق تمامًا أيضًا؟ الجيز ، الذي يحتاج إلى عارض الخط ، إذا كان بإمكان المرء القيام بذلك بالطريقة الصعبة ...

jerch في ٢٢ نوفمبر ٢٠١٩

😄1

أود أن أفهم الأسباب التي تجعل أي من الخطوط لا تفهمها بشكل صحيح. لكن ليس لدي الوقت والحافز للتحقيق.

egmontkob في ٢٢ نوفمبر ٢٠١٩

شيء واحد مثير للاهتمام يمكن أن يفعله هذا ولا يمكن للخطوط أن تملأ الخلية بأكملها عند تحديد ارتفاع الخط.

Tyriar في ٢٣ نوفمبر ٢٠١٩

سلوك مضحك إضافي (محطة vscode):
out3
بالنسبة لي ، لا يساعد تغيير أحجام الخطوط باستخدام الخط hack المذكور سابقًا ، فلا يزال التباعد قائمًا. ومع ذلك ، انطلاقا من الصورة المتحركة أعلاه ، يبدو أن شخصيات الكتلة يتم وضعها بشكل متقطع. توجد فجوة بكسل واحدة في الجزء السفلي ويبدو الفرق بين الكتل 7/8 و 8/8 (ممتلئ) أصغر من الكتل الأخرى.

nojus297 في ١٥ أبريل ٢٠٢٠

على نظام macOS (شاشة Retina ، devicePixelRatio = 2) + Chrome ، يمنحني استخدام خط Hack فجوات رأسية صغيرة مثل هذا:
Screen Shot 2020-04-28 at 20 44 51
لكن بعد التنقيب لاحظت أن تحويل BaseRenderLayer._clipRow إلى no-op يعرضها بشكل صحيح:

الأمر الذي يقودني إلى الاعتقاد بأن هذه قد تكون مشكلة تقليم.

guregu في ٢٨ أبريل ٢٠٢٠

👍1

guregu يجب على عارض اللوحة القماشية حسب التصميم قص الصفوف أو سينتهي الأمر

لا يزال يتم تمييز هذا على أنه مطلوب مساعدة وربما يمكن / يجب أن يتم ذلك فقط في عارض webgl وفي هذه الحالة سيكون الأمر يتعلق بمعالجة هذه الأحرف المعينة خاصة عند رسم الحرف على أطلس النسيج:

https://github.com/xtermjs/xterm.js/blob/45077d710627fb2aec61ac2dfc41879d8c32371e/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts#L304 -L306

Tyriar في ٢٨ أبريل ٢٠٢٠

تمكنت FWIW من إصلاحه دون العبث بالقص.
لم تكن المشكلة في القصاصة ، ولكن استخدام middle مثل textBaseline تسبب في انحرافه قليلاً.
أدى تغيير textBaseline إلى bottom إصلاح المشكلة تمامًا بالنسبة لي.
الفرق: https://github.com/xtermjs/xterm.js/compare/master...guregu : سيد
يمكنني إرسال PR إذا كان يبدو جيدًا ، لكنني لست متأكدًا مما إذا كان هذا سيؤدي إلى تلف شيء آخر.

هل هناك سبب معين لتعيينه على middle قبل؟
لقد لاحظت أنه يضبط النص العادي بشكل أقل قليلاً ، لكنه يبدو مكافئًا لكيفية عرض Terminal.app للنص.

إليك لقطة شاشة للرمز الذي يتم تشغيله من بداية PR هذا بدون الإصلاح:
Screen Shot 2020-04-28 at 22 29 03
هنا مع الإصلاح المطبق:

guregu في ٢٨ أبريل ٢٠٢٠

guregu سابقًا استخدم عارض webgl الجزء العلوي ، ولكن انتهى به الأمر إلى جعل النص أعلى محاذاة:

أخشى أن يحدث هذا إذا استخدمنا bottom

راجع https://github.com/xtermjs/xterm.js/issues/2613 ، https://github.com/xtermjs/xterm.js/issues/2645 ، https://github.com/microsoft/vscode/issues / 95813

Tyriar في ٢٨ أبريل ٢٠٢٠

كما أنه ليس مثاليًا حتى تجاهل مشكلة المحاذاة السفلية (لاحظ الشقوق على الخط الأفقي):

أعتقد أن رسم الحروف الرسومية المثالية يدويًا هو السبيل للذهاب.

Tyriar في ٢٨ أبريل ٢٠٢٠

Btw @ nojus297 يشبه الإخراج إلى حد كبير مشكلة إزاحة 0.5 بكسل. لقد تعثرت في مشكلات antialiasing مع 0.5 تعويض نفسي في اليوم الآخر ، عندما العبث مع تسطير مجعد رسمها ذاتيًا. لست متأكدًا مما إذا كان هذا ينطبق هنا على الإطلاق (لا يزال غير مستخدم لكود العارض لول).

jerch في ٢٨ أبريل ٢٠٢٠

هل يمكن أن نتحقق من مستوى التكبير / التصغير أيضًا للتأكد من أنه 1. هل يجب أن نخفضه بمقدار 0.5 بكسل عندما يكون حجم الخط غريبًا؟ 🤔

Tyriar في ٢٨ أبريل ٢٠٢٠

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

أساس هذه المشكلة هو أنه ، لسبب ما ، يتم دفع النص الذي يشغل الارتفاع الكامل للخلية إلى أعلى بضع بكسلات ويتم قصه عند استخدام middle كـ textBaseline .
من السهل التحقق من ذلك إذا قمت بتمييزه.
XTERM_BROKE
^ نسخة غير مثبتة ، يمكنك أن ترى أن هناك عدد قليل من البيكسلات الفارغة في الجزء السفلي من ║

فيما يتعلق بالشقوق الموجودة على الخط الأفقي ، يبدو أن Terminal.app لديه نفس المشكلة. ربما هي مشكلة الخط؟ لا يوجد فكرة.
لقطة شاشة من Terminal.app:
Screen Shot 2020-04-29 at 0 02 04

ومع ذلك ، حتى مع التغييرات ما زلت أرى بعض الغرابة ، مثل استخدام المؤشر يتسبب في ظهور شقوق سوداء صغيرة. هذا لا يحدث في الواقع. ربما تتعلق بالشقوق الأخرى؟
هذا مأخوذ من xterm.js ، ويحدث في كلا الإصدارين المتغيرين وغير المتغيرين:
rendering-oddness

على أي حال ، أوافق على تقديم هذه الشخصيات خصيصًا هو السبيل للذهاب. مجرد محاولة للعثور على سبب حدوث ذلك في المقام الأول.

guregu في ٢٨ أبريل ٢٠٢٠

لقد اختبر بعض الأصدقاء إصلاحي على Windows وهو في الواقع يجعل الأمور أسوأ 😅
يبدو أن الغلاف الخاص هو الطريقة الوحيدة المؤكدة لإطلاق النار. اسف بشأن ذلك.
ربما يكون عنصر المؤشر مشكلة منفصلة. مسح اللوحة بأكملها أثناء clearCursor يصلحها. يبدو أن حرف الرسم المربع الأفقي يرسم أوسع قليلاً من عرض الخلية؟

guregu في ٢٨ أبريل ٢٠٢٠

guregu شكرا للنظر في الأمر.

يبدو أن حرف الرسم المربع الأفقي يرسم أوسع قليلاً من عرض الخلية؟

ربما ، نحن نسمح بذلك. الشيء الذي قد يعمل هو قص الحرف الرسومي إلى حجم خلية فقط لهذه الأحرف المربعة؟

Tyriar في ٢٨ أبريل ٢٠٢٠

لقد أجريت بعض التجارب في رسم بعض الشخصيات يدويًا.
صفحة العرض التوضيحي: https://roguelike.solutions/xterm/xtermtest.html

الكود تقريبي ، ولكنه متاح هنا: https://github.com/xtermjs/xterm.js/compare/master...guregu : box-drawing

guregu في ٥ مايو ٢٠٢٠

❤3

هذا كله تجريبي للغاية ، ولكن إذا بدت فكرة جيدة فسأكون سعيدًا بالمساهمة (وإضافة دعم لعارض WebGL).

guregu عمل رائع ، ستكون المساهمة رائعة ، ما عليك سوى التأكد من أنها ليست مشتقة جدًا من خوارزمية iTerm2 لأن GPL2 ثابتة. أود أن أقترح القيام بذلك فقط من أجل عارض webgl (وليس قماش الرسم لأنه سيتم إلغاؤه). بالتأكيد تستند الخطوط على devicePixelRatios بحيث يكون العرض رائعًا على جميع الشاشات.