Font in demo is kind of unreadable #1078

Closed
cubiclesoft opened this Issue Nov 4, 2012 · 4 comments

Comments

Projects
None yet
2 participants

ACE font selection issue

Above is a screenshot of what I see. The '.' in 'items.length' is hard to see. Semi-colons are not as difficult but look more like commas. The dot over the letter 'i' in the various words are also difficult to make out. I recall older versions of ACE had a much more readable font at 12px.

Just using monospace as the font

Using Firebug, I whittled away at the .ace_editor CSS. "Ubuntu Mono" on Windows 7 is the primary culprit, "Droid Sans Mono" is the secondary culprit, and "Consolas" is the third. The font selection only looked good when 'font-family' was just 'monospace' as seen above.

After a lot of testing, I ended up dropping everything in the 'font-family' for the '.ace_editor' class to just 'monospace'. Since there is no way to override this except to edit the Javascript file directly, it is best to let the browser's default monospace font dictate the appearance.

Based on this experience, I've come to the conclusion that there needs to be an API exposed at the editor level that lets the developer select the font set for the editor and the API needs to be clearly documented with a good example.

Member

nightwing commented Jan 29, 2013

What api do you propose to add? I'd say one of the following is easy enough to do, but there might be a nicer way.

#editor {
    font-family:monospace
}
.ace_editor {
    font-family:monospace!important
}
editor.container.style.fontFamily = "monospace"

Assuming 'editor' is referencing the ACE editor object, that last one looks promising. I ended up using the second option with a string replacement on the minified Javascript.

Member

nightwing commented Mar 28, 2013

Added fontFamily option for editor see https://github.com/ajaxorg/ace/pull/1304/files#L5R1429

@nightwing nightwing closed this Mar 28, 2013

jackygurui added a commit to jackygurui/docker-dnsmasq that referenced this issue Jul 29, 2016

fixing caret offset issue
The caret seems to be flashing at a offset location to where the character appears. According to a previous issue ajaxorg/ace#1078, ACE editor doesn't seems to like any fonts that is not from the monospace family.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment