Ace: Неправильная позиция курсора

Попробуй бежать

fm = editor.renderer.$textLayer.$fontMetrics;
"xiXbm".split("").map(fm.$measureCharWidth, fm)

если при этом печатаются разные числа, то шрифт, используемый в редакторе, не является моноширинным.

Также обратите внимание, что добавление правила consolas !important - плохая идея, поскольку оно не работает в Linux и Mac.

У меня была аналогичная проблема, и это дополнение css исправило ее. Может помочь...

.ace_editor, .ace_editor div{
    font-family:monospace
}

(Причина: как сказал @nightwing . Это добавление css гарантирует, что вы используете моноширинный режим.)

У меня есть пользователи, которые видят эту проблему в Windows 10 / Chrome 41.0.2272.76.

@nightwing Когда я запустил этот фрагмент кода, это был результат.

Это происходит только в Windows. Раньше я обнаруживал, что позиция курсора _ всегда_ неправильная в Windows 8+, пока я не скорректировал межбуквенный интервал: https://github.com/ajaxorg/ace-builds/issues/58

Однако мои пользователи все еще иногда видят это. Смотрите скриншоты здесь:
https://github.com/Crunch/Crunch-2/issues/39

Использует ли Ace _все_ свойства CSS отображаемой строки при измерении? Например, межбуквенный интервал, тень текста, рендеринг текста, -webkit-text-size-adjust и -webkit-font-smoothing? (То есть использует ли он вычисленный стиль текущего шрифта применительно к видимому редактору?) Или только определенные?

@ matthew-dean он требует, чтобы все эти свойства были настроены в корневом элементе редактора, поэтому стили, унаследованные строками ace, наследуются также и мерой div.
текстовый рендеринг: optimizeLegibility не поддерживается

@nightwing text-rendering: optimizeLegibility действительно может быть виновником. Это единственное, что я мог придумать, чтобы компенсировать моноширинность по-другому, что, по-видимому, было проблемой, особенно в Chrome, _ особенно в Chrome для Windows_, начиная с Windows 7. См .: https://github.com/zurb/foundation/issues/ 1827 (и другие различные ошибки).

Я попробую удалить эту настройку, по крайней мере, для редактора, чтобы увидеть, изменится ли она. @vdzundza Поскольку это происходит с перебоями, мне было бы интересно узнать, работает ли это для вас (и применялись ли у вас это свойство / значение).

Я изменил этот параметр на рендеринг текста: geometryPrecision, который должен быть еще более точным при рендеринге текстовых символов. Однако в Windows он по-прежнему неправильно рисует позицию курсора. Смотрите больше скриншотов @ https://github.com/Crunch/Crunch-2/issues/39

Не могли бы вы дать мне демонстрационную страницу, воспроизводящую эту проблему, или, может быть, crunch-2, чтобы я мог ее отладить?

@nightwing Вы можете получить копию Crunch 2 здесь: https://github.com/Crunch/Crunch-2/releases

Тогда напишите мне в Твиттере: https://twitter.com/matthewdeaners. На NWJS вы можете получить доступ к инструментам разработчика Chrome, но для Crunch нужно выполнить несколько шагов.

@nightwing Есть идеи? У нас все еще возникают проблемы с Windows 10.

Я не смог воспроизвести это в Windows 10, не могли бы вы прислать мне изображение, показывающее проблему?

@nightwing В этой https://github.com/Crunch/Crunch-2/issues/39

@nightwing Теперь я думаю, что это шрифт Hasklig (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering либо с optimizeLegibility, либо с geometryPrecision. Любая настройка, которая включает лигатуры, приводит к отображению с несоответствующей шириной символов. Я тестировал его с длинными строками лигатур и путем включения / выключения рендеринга текста, при этом длина строк менялась. Итак, в моем случае это, вероятно, не проблема Ace, поскольку Hasklig технически не выглядит моноширинным шрифтом в этой среде. Простите за погоню за дикими гусями; Я не понимал, что шрифт отображается немоноширинным.

Эээээ ... Возможно, я заговорил слишком рано. У меня также возникают проблемы с позицией курсора в Source Code Pro, а text-rendering: optimizeLegibility выключен. Однако установка / отключение отрисовки текста, кажется, «сбрасывает» измерения курсора, поэтому иногда вы не можете воспроизвести его с первого раза.

Хорошо. Итак, я точно не знаю причину, но у меня есть исправление. Я устанавливаю text-indent: 0.1px а затем text-indent: 0.1px после короткого тайм-аута. Это запускает layout / paint / композит, как указано здесь: http://csstriggers.com/

@nightwing Одна из причин, по которой вы не сталкивались с этим, может заключаться в том, что установка темы ace, вероятно, в большинстве случаев вызывает макет / раскраску / композицию, если какие-либо из «собственных» настроек шрифта браузера не соответствуют настройкам шрифта в тема, которая кажется вероятной. Первая отрисовка текстовой строки в Chrome может быть неточной, то есть измерения Ace тоже будут, но пока кто-то устанавливает хотя бы одно свойство CSS, которое запускает изменение макета, никто этого не заметит.

Итак, если вы хотите воспроизвести, вы можете протестировать с некоторыми настройками шрифта, установленными только в CSS, а не в теме, но я не уверен, какая волшебная комбинация может быть для воспроизведения ошибки. Также возможно, что Ace сможет обнаружить эту ошибку, измерив конкретную строку текста с помощью определенного CSS и сравнив ее с известной константой (каким должен быть результат), а затем, если он не совпадает, запустив перерисовку в таким же образом. (Но, конечно, в первую очередь это означало бы воспроизвести ошибку.)

Еще одна вещь, которую вы могли бы сделать, - это сделать так, чтобы Ace всегда устанавливал (позднее) свойство CSS, независимо от того, что всегда будет запускать макет / перерисовку. (Я пытался придумать что-то, что не было бы заметно видно, но я не уверен, что это могло быть.) Насколько я могу судить, нет заметного снижения производительности от выполнения этого один раз, а это все, что вам нужно. .

Я столкнулся с точной проблемой и смог ее исправить (в моем случае).

Я запускал функцию на выходе из Ace, чтобы извлечь переднюю часть YAML. Указанная функция запускается в событии onChange Ace. Когда моя функция выдавала ошибки, курсор начинал рассинхронизироваться. В отличие от другой аналогичной проблемы, при которой курсоры постоянно не синхронизируются, этот «восстанавливается», потому что, если я выберу все, удалю все и начну писать без ошибок функции, курсор будет расположен правильно.

Не уверен, что я достаточно ясен, или это помогает каким-либо образом, но я подозреваю, что любое прерывание потока кода, окружающего Ace, приводит к неправильному обновлению позиции курсора (следовательно, позиция курсора обновляется _after_ определенное вещи выполняются, и если это не удается, позиционирование курсора не удается?).

Ошибка выдачи @kenlimmj из слушателей событий нарушит работу редактора, поскольку другие слушатели не будут вызываться.
editor.on("input", может быть лучшим событием для того, что вы делаете.

Та же проблема.

Снимок экрана:

@ AviralGarg1993 вам необходимо использовать моноширинный шрифт.

@nightwing: Похоже, это не сработало.

https://github.com/AviralGarg1993/codeSirens/commit/edf539da1d752e5b7404a4fd7ae129f0f74a1d35

Для всех, у кого есть эта проблема, это может помочь:

Если у вас установлен размер шрифта в rem (как в Bootstrap 4), ваш курсор будет дурацким.
Установка размера шрифта 12 пикселей решила мою проблему:

.ace_editor .ace_content {
  font-size: 12px !important;
}

В основном Ace может отображать только «моноширинные» шрифты, вы можете как-то изменить шрифт или вам назначили имя шрифта в css.
если вы работаете в firefox, шрифт по умолчанию изменит ваш моноширинный шрифт. так что имейте это в виду.

Совет @wislem не сработал для меня, но

Я подозреваю, что использование этого в глобальной таблице стилей решит все проблемы независимо от фреймворка. Однако основная проблема использования font-size в rem была той же самой основной проблемой.

.ace_editor div, .ace_editor span { font-size: 12px !important; }

Похоже, что редактор Ace работает только с моноширинным шрифтом. Как указано в @ skbly7, решение может применять font-family:monospace но добавление !important предотвратит переопределение другим CSS, применяемым после слов в элементах.

.ace_editor, .ace_text-input, .ace_editor div{
    font-family : monospace !important;
}

Я создаю новый сайт, используя Ace for Less.js, и это все еще проблема, на странице больше ничего, кроме двух редакторов. Собираюсь попробовать свой старый text-indent: 0.1px хак.

На этот раз виновниками были стили по умолчанию в проекте Vue:

html {
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

Стили Ace по умолчанию, вероятно, должны сбросить эти настройки.

Кажется, это старая проблема с редактором Ace, особенно очевидная, когда вы вставляете текст на неанглийском языке.

Я предполагаю, что какой-то сумасшедший код вызывает это
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

попробуйте с
Встре́ча с медве́дем мо́жет быть о́чень опа́сна. Ру́сские лю́ди лю́бят ходи́ть в лес и собира́ть грибы́ и я́годы. Они́ де́лают э́то с осторо́жностью, так как медве́ди то́же о́чень лю́бят я́годы и мо́гут напа́сть на челове́ка. Медве́дь ест всё: я́годы, ры́бу, мя́со и да́же насеко́мых. Осо́бенно он лю́бит мёд.

вместо того, чтобы выбирать странные шрифты, разве вы не хотите вместо этого исправить причину? Это не проблема в редакторе монако

Вы еще не исправили проблему с курсором. Там очень много всего, и я не думаю, что проблема в CSS. Это сумасшедшая логика курсора

https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1309

и особенно
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1482
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1509
координата X выключена!
это также влияет на желоба. ширина шрифта вообще не учитывается

или, может быть
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

Я как бы нахожусь на грани рефакторинга своего приложения, чтобы вместо этого использовать monaco, но мне также интересно, можно ли это исправить

даже когда я установил моноширинный шрифт на русском языке, проблема все еще существует

Одно временное решение для этого ада моноширинных шрифтов - включить моноширинный шрифт с редактором ace, который охватывает все языки, а не только русский.

Я думаю, что есть еще одна проблема с вставкой форматированного текста в редактор ace, испорченная положением курсора. Ace не занимается его дезинфекцией

@blurymind Я думаю, что длинный и короткий алгоритм оценки положения курсора ужасно наивен в отношении того, как шрифты отображаются в движке браузера. Так что вместо того, чтобы измерять, как на самом деле нарисованы символы, он, кажется, оценивает, какими они «должны быть» на основе некоторых базовых настроек CSS и, возможно, размера одного символа, и предполагает, что метрики должны сохраняться для остального текста? Я не уверен, какие предположения делаются, но они кажутся ошибочными по своей сути.

Вы не можете точно узнать, где находится конец отрисованного текстового блока, не получив его фактических показателей. Я не уверен, каков правильный алгоритм, но кажется, что, поскольку его так легко сломать, они рассуждают о положении курсора и ширине текста в корне ошибочны.

В моем случае это произошло только после ввода «ff» или «fi» ... У меня сработало отключение лигатур.
Так что просто добавь
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
в CSS.

Надеюсь, поможет ;)

Привет,
странная ситуация, но я могу подтвердить, что проблема не в шрифте.
В моем проекте у меня есть компонент, использующий редактор Ace для ввода JSON. Это всегда заставляет шрифт быть «моноширинным».
В любом случае, когда он изолирован, он работает в Storybook без проблем.
Когда компонент наследуется от CSS (при использовании в приложении, а не в сборнике рассказов), у меня все равно возникает такая же проблема с неправильным курсором.
Унаследованных стилей много, но шрифт моноширинный.

@Copainbig могут мешать и другие правила css, например, установка размера шрифта для всех элементов div.

Я использую mediawiki + chrome и обнаружил ту же ошибку.

Проблема решена с помощью

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; }

в Mediawiki: Common.css

@ skbly7 Я столкнулся с этой проблемой, похоже, что в предыдущей версии Ace Editor ваше решение сработало, но для меня это не так.

Вот решение, которое вы искали,

.ace_editor * {
    font-family: monospace !important;
}

Все, что тебе нужно знать

Таким образом, очевидно, что вы не можете использовать какой-либо другой шрифт при использовании редактора ace. Это сильно испортит UX для вашего редактора кода или того, над чем вы, возможно, работаете там, где вы, вероятно, пытаетесь реализовать редактор ace. Так что, если вы столкнетесь с этой проблемой в будущем, вы можете использовать приведенный выше код, чтобы избавиться от этой дерьмовой проблемы, потому что это сука, которую нужно решать. И нет, это не была ошибка javascript, это была просто ошибка / ошибка css, из-за которой она не работала должным образом.

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; }

отлично работает для меня, на windows10 с использованием пакета react ace