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

에이스는 측정시 표시된 라인의 _all_ CSS 속성을 사용합니까? 문자 간격, 텍스트 그림자, 텍스트 렌더링, -webkit-text-size-adjust 및 -webkit-font-smoothing과 같은? (즉, 보이는 편집기에 적용된 현재 글꼴의 계산된 스타일을 사용합니까?) 아니면 특정 글꼴만 사용합니까?

@matthew-dean 편집기 루트 요소에서 이 모든 속성을 사용자 정의해야 하므로 에이스 라인에 상속된 스타일은 측정 div에도 상속됩니다.
텍스트 렌더링:optimizeLegibility 는 지원되지 않습니다.

@nightwing text-rendering: optimizeLegibility 가 실제로 범인일 수 있습니다. 고정 공간을 다르게 상쇄할 수 있다고 생각할 수 있는 유일한 것입니다. 이는 특히 Chrome, _특히 Windows용 Chrome_에서 Windows 7 이후로 분명히 문제였습니다. 참조: https://github.com/zurb/foundation/issues/ 1827 (및 기타 다양한 버그가 제출됨).

적어도 편집자는 해당 설정을 제거하여 변경되는지 확인하겠습니다. @vdzundza 이것은 간헐적이기 때문에 그것이 당신에게 효과가 있는지 알고 싶습니다(그리고 당신이 그 소품/값을 적용했다면).

나는 그 설정을 text-rendering: geometricPrecision으로 변경했는데, 이것은 텍스트 문자 렌더링에서 훨씬 더 정확해야 합니다. 그러나 Windows에서는 여전히 커서 위치를 부정확하게 그립니다. https://github.com/Crunch/Crunch-2/issues/39에서 더 많은 스크린샷 보기

이 문제를 재현하는 데모 페이지를 제공하거나 디버그할 수 있도록 crunch-2를 제공할 수 있습니까?

@nightwing 여기에서 크런치 2의 사본을 얻을 수 있습니다: https://github.com/Crunch/Crunch-2/releases

그런 다음 Twitter에서 저에게 메시지를 보내주십시오. 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 또는 geometricPrecision이 있다고 생각합니다. 합자를 활성화하는 모든 설정은 결과적으로 일관되지 않은 문자 너비로 렌더링됩니다. 긴 줄의 합자로 테스트하고 텍스트 렌더링을 켜고 끄면 선의 길이가 변경되었습니다. 따라서 제 경우에는 Hasklig가 해당 환경에서 기술적으로 고정 폭 글꼴로 보이지 않기 때문에 Ace 문제가 아닐 것입니다. 기러기 추격전 죄송합니다. 글꼴이 비고정 공간으로 렌더링되고 있다는 것을 몰랐습니다.

Errrr... 너무 빨리 말했을 수 있습니다. Source Code Pro에서도 커서 위치에 문제가 있으며 text-rendering: optimizeLegibility 이 꺼져 있습니다. 다만, 텍스트 렌더링 설정/해제 시 커서 측정이 '리셋'되는 것 같아서 처음 이후로는 재생이 안되는 경우가 있습니다.

괜찮아. 그래서 정확한 원인은 모르지만 저에게 맞는 해결책이 있습니다. text-indent: 0.1px 설정하고 잠시 후 text-indent: 0.1px 를 설정합니다. 이것은 http://csstriggers.com/에 명시된 대로 레이아웃/페인트/합성을 트리거합니다

@nightwing 브라우저의 "내재적" 글꼴 설정이 글꼴 설정과 일치하지 않는 경우 대부분의 경우 ace 테마를 설정하면 레이아웃/페인트/합성이 발생하기 때문일 수 있습니다. 가능성이 있어 보이는 테마. Chrome의 첫 번째 텍스트 라인 페인트는 정확하지 않을 수 있습니다. 즉, Ace의 측정도 정확할 수 있지만 누군가 재레이아웃을 트리거하는 CSS 속성을 하나만 설정하는 한 아무도 알아차리지 못할 것입니다.

따라서 재현하려는 경우 테마가 아닌 CSS에서만 설정된 일부 글꼴 설정으로 테스트할 수 있지만 버그를 재현할 수 있는 마법의 조합이 무엇인지 잘 모르겠습니다. Ace가 특정 CSS로 텍스트의 특정 줄을 측정하고 알려진 상수(결과가 어떠해야 하는지)와 비교하여 이 버그를 감지할 수도 있고, 일치하지 않을 경우 다시 그리기를 트리거할 수도 있습니다. 같은 방식으로. (물론 그것은 처음부터 버그를 재현한다는 것을 의미합니다.)

당신이 할 수 있는 또 다른 일은 Ace가 항상 레이아웃/다시 그리기를 트리거하는 것과 상관없이 항상 (늦은) CSS 속성을 설정하도록 하는 것입니다. (나는 눈에 띄지 않는 것을 알아내려고 노력했지만 그것이 무엇인지 잘 모르겠습니다.) 내가 말할 수 있는 한, 이 작업을 한 번 수행해도 눈에 띄는 성능 저하가 없습니다. 이것이 당신이 필요로 하는 전부입니다 .

나는 정확한 문제에 직면했고 (내 경우에) 그것을 고칠 수 있었다.

나는 YAML 머리말을 추출하기 위해 Ace의 출력에서 ​​함수를 실행하고 있었습니다. 이 함수는 Ace의 onChange 이벤트에서 실행됩니다. 내 함수에서 오류가 발생하면 커서가 비동기화되기 시작했습니다. 커서가 영구적으로 동기화되지 않는 또 다른 유사한 문제와 달리 이것은 '복구'됩니다. 왜냐하면 내가 모두를 선택하고 모든 것을 삭제하고 함수가 오류를 던지지 않고 쓰기를 시작하면 커서가 올바르게 배치되기 때문입니다.

내가 충분히 명료한지 또는 어떤 식으로든 도움이 되는지 확실하지 않지만 Ace를 둘러싼 코드 흐름에 대한 중단으로 인해 커서 위치가 올바르게 업데이트되지 않는 것으로 의심됩니다(커서 위치가 _after_ 특정 일이 실행되고 실패하면 커서 위치 지정이 실패합니까?).

@kenlimmj 이벤트 리스너에서 오류가 발생하면 다른 리스너가 호출되지 않으므로 편집기가 중단됩니다.
editor.on("input", 는 현재 하고 있는 일에 더 나은 이벤트일 수 있습니다.

같은 문제.

스크린샷:

@AviralGarg1993 고정폭 글꼴을 사용해야 합니다.

@nightwing 작동하지 않는 것 같습니다.

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

이 문제가 있는 다른 사람에게는 다음이 도움이 될 수 있습니다.

rem에 글꼴 크기가 설정되어 있으면(Bootstrap 4에서와 같이) 커서가 이상합니다.
글꼴 크기를 12px로 설정하면 내 문제가 해결되었습니다.

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

기본적으로 Ace는 '고정 공간' 글꼴만 표시할 수 있습니다. 글꼴을 어떻게든 변경하거나 CSS에서 글꼴 이름을 할당했을 수 있습니다.
파이어 폭스에서 작업하는 경우 기본 글꼴이 고정 폭 글꼴을 변경합니다. 그래서 그것을 알고 있습니다.

@wislem 의 조언은 저에게 효과가 없었지만 저를 올바른 길로

전역 스타일시트에서 이것을 사용하면 프레임워크에 관계없이 모든 문제가 해결될 것이라고 생각합니다. rem에서 font-size를 사용하는 기본 문제는 동일한 핵심 문제였습니다.

.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를 사용하여 새 사이트를 구축 중이며 이는 2명의 편집자를 제외하고 페이지에 아무 것도 없는 여전히 문제입니다. 내 오래된 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 편집기와 고정 폭 글꼴을 포함하는 것입니다.

서식이 지정된 텍스트를 에이스 편집기에 붙여넣으면 커서 위치가 엉망이 되는 또 다른 문제가 있다고 생각합니다. 에이스는 소독하지 않습니다

@blurymind 커서 위치를 추정하는 알고리즘은 브라우저 엔진에서 글꼴이 렌더링되는 방식에 대해 매우 순진합니다. 따라서 문자가 실제로 어떻게 그려지는지를 측정하는 대신 몇 가지 기본 CSS 설정과 단일 문자의 크기를 기반으로 "해야 할 것"을 추정하고 나머지 텍스트에 대해 메트릭이 유지되어야 한다고 가정합니다. 어떤 가정이 만들어지고 있는지 확실하지 않지만 본질적으로 결함이 있는 것 같습니다.

실제 메트릭을 가져오지 않고는 렌더링된 텍스트 블록의 끝이 어디인지 알 수 없습니다. 정확한 알고리즘이 무엇인지는 잘 모르겠지만 깨지기 쉽기 때문에 커서 위치와 텍스트 너비에 대한 추론은 근본적으로 결함이 있는 것 같습니다.

제 경우에는 "ff" 또는 "fi"를 입력한 후에야 발생했습니다... 저에게는 합자를 끄는 것이 효과가 있었습니다.
그래서 그냥 추가
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
CSS에.

도움이 되길 바랍니다 ;)

안녕,
여기에 이상한 상황이 있지만 글꼴이 단일 문제가 아님을 확인할 수 있습니다.
내 프로젝트에는 Ace 편집기를 사용하여 JSON을 입력하는 구성 요소가 있습니다. 항상 글꼴이 "고정 폭"이 되도록 합니다.
어쨌든, 그것은 격리되었을 때 Storybook에서 원활하게 작동합니다.
구성 요소가 CSS에서 상속되는 경우(스토리북이 아닌 앱에서 사용하는 경우) 커서가 오작동하는 것과 동일한 문제가 있습니다.
상속된 스타일이 많이 있지만 글꼴은 고정 폭입니다.

@Copainbig 다른 CSS 규칙도 방해할 수 있습니다(예: 모든 div 요소의 글꼴 크기 설정)

미디어위키 + 크롬을 사용하고 있는데 같은 오류가 발생했습니다.

사용하여 해결한 문제

.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; }

미디어위키에서:Common.css

@skbly7 이 문제에 직면했습니다. 이전 버전의 Ace Editor에서와 같이 귀하의 솔루션은 효과가 있었지만 저에게는 효과가 없었습니다.

여기 당신이 찾던 솔루션이 있습니다.

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

알아야 할 모든 것

따라서 분명히 ace 편집기를 사용할 때 다른 글꼴을 사용할 수 없습니다. 코드 편집기나 에이스 편집기를 구현하려고 하는 곳에서 작업할 수 있는 모든 UX를 엉망으로 만들 것입니다. 따라서 미래에 이 문제에 직면할 경우에 위의 코드를 사용하여 해결해야 할 암캐이기 때문에 이 엉터리 문제를 제거할 수 있습니다. 그리고 아니요 그것은 자바 스크립트 오류가 아니라 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에서 저에게 잘 작동합니다.