How to enable retina/high-dpi mode in linux


#1

Hello atoms

I would like to use atom on linux. I have a retina macbook and would therefore like to enable high dpi mode.
As this works out of the box for the osx version I would assume that it is just a ‘hidden’ setting that needs to be enabled? Any ideas for what to look out?

Thanks


Interface scaling
#2

As far as I know this isn’t actually supported at all at the moment.
There is an issue open for it, so I’m suprised you say it’s working out of the box on OSX.


#3

Why are you surprised? First of all, Chrome (and thus Chromium) on OS X supports high DPI and have had so more or less since the first release of the MacBook Pro with Retina Display. Second, since Atom was initially only targeting OS X, great efforts would undoubtedly have been made to make sure it looked beautiful on Retina displays.

Since support for high DPI is improving in Chromium for non-OS X operating systems, you’ll get proper high DPI support in Atom not too far into the future I guess :hourglass_flowing_sand:


As a side note, high DPI is infinitely easier to support on OS X, when compared to Windows and the X window system on GNU/Linux, because of superior API level support ,and overall OS support. Win32 APIs are a goddamn mess…


#4

Still… what would be the answer to my question? Is it not supported on Linux?


#5

Because I didn’t know all that. :wink: I have no idea what goes on in your Mac world.

atom-shell on Windows gets high-DPI support apparently soon, depending on chromium. We’ll see.


#6

I’m not a position to test right now how far this has progressed, but Chromium has basic support for high DPI on GNU/Linux. It does need to be enabled at compile time though:
https://code.google.com/p/chromium/issues/detail?id=143619

Until this get’s resolved upstream in Chromium, I’m pretty sure you’re out of luck. There isn’t really much the Atom team can do, other than getting this fixed in Chromium.


#7

Hi,

I have ubuntu 14.10, with atom amd64 deb package, release 136.
I also installed chromium (37.0.2062.94 Ubuntu 14.10, 290621, 64-bit)
for reference.

The 15" laptop has a screen with 1920x1080 resolution,
with 143ppi density (345mm x 145mm).

In preference->Editor settings->Font Size I set it to 24.
Here is a screenshot:

The fonts are in the editor (in real world) about 3mm tall, while on the left pane, it is only 1.2mm tall.

I have launched chromium with these two settings:
chromium-browser --enable_hidpi=1
(obeys system-wide dpi settings (143dpi in my case, set in xorg.conf))

chromium-browser --force-device-scale-factor=1.4
I can specify the relative zoom factor. Implemented for retina display, so =2 is the default, but in my case 1.4 is the best size.

All the two are working.

So the question is, how can I launch atom.io with a zoom factor, or with specifying the dpi settings.
I dont mind the blurry pixel icons, I only want to be able to read the texts.

This is all with todays’ state (2014. october 09).

Any help s much appreciated.


#8

The font size setting and most of the sizes in themes are specified in pixels, so I assume this is why everything is so small in a high DPI mode. I like my labels a little larger than most it would seem, so I have the following in my styles.less to blow things up a little bit:

@ui-font-size: 14px;

.overlay .select-list ol.list-group li,
.overlay.select-list ol.list-group li {
  font-size: @ui-font-size;
}

.status-bar {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
  line-height: @ui-font-size * 2 - 4;
}

.tab-bar .tab, .tab-bar .tab.active {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
}

.tree-view {
  font-size: @ui-font-size;
}

You might try adding that and playing around with different settings for @ui-font-size.


How to set the font for the settings UI and the command browser
#9

Thank you leedohm, you saved me, it works like a charm.
I set the @ui-font-size: 18px;

I should only find the Edit->Preferences fonts, because they are still small.
Maybe you know that also? I try to dig deeper, if not.
Thank you very much for the starting point, it is already usable as is!

Edit:
I grepped through /usr/share/atom/* and its subdirectories, but I could not find ui-font-size.
I also unpacked content_shell.pak file, but still no luck with ui-font-size.

I don’t know how you figured out the CSS variable name…
Would you mind enlighten me?


#10

I didn’t figure it out, I created it myself :smile: That definition in the styles.less is the first definition of it.


#11

Two problems remains:

  1. texts on tab are small
  2. Preferences pane has too small fonts

I brought up the Developer tools, inspected the gui elements,
if I change it inside Developer tools css panel, it works.
BUT if I put the same definition inside my styles.less, it does not.

There is a workaround though for preference pane.
Installing a whatever theme (eg. Hip Light), and I change the
@font-size: 13px; to something sane (16px) in ui-variables.less:72, then the settings panel has bigger fonts.

But putting that definition inside my styles.less has absolutely no effect.
Also could not figure out the texts on tab either.

leedohm, thanks for the comment it definietly motivated me to RTFM:)


#12

That’s correct. LESS is a language that gets compiled into CSS. Since CSS does not have support for variables, all of the variables are converted to actual values in the resulting CSS. Unfortunately, the LESS in theme packages and the LESS in your styles.less customizations are compiled separately. This means that while your styles.less can refer to variables declared in your theme packages by way of @import statements, your styles.less cannot modify those variables and have those modifications take effect in the themes. Your styles.less can only modify your themes after-the-fact.

The text on the tabs in the UI theme I use is controlled by this part of the LESS that I posted:

.tab-bar .tab, .tab-bar .tab.active {
  font-size: @ui-font-size;
  height: @ui-font-size * 2;
}

Perhaps your UI theme is different.


#13

I have put in styles.less:

.tab-bar .tab, .tab-bar .tab.active {
  font-size: @ui-font-size *4;
  height: @ui-font-size * 4;
}

It has no effect. I tried with Atom Dark, Atom Light, Hip Light UI theme (changed via Preference).
I tried also with font-size: 26px;, still no effect.


#14

What I was saying is that the CSS selectors may need to be different. The CSS selectors are this part: .tab-bar .tab, .tab-bar .tab.active. You should launch Atom in Developer Mode (atom --dev) and use Inspect Element to find out more about the CSS classes associated with the parts you still want to change.


#15

Thank you for holding my hand:)

The problem was, that I had a syntax error in my .less file, and failed to update:-\

Here is my styles.less file for reference (thank you again leedohm!):

@ui-font-size: 18px;

.overlay .select-list ol.list-group li,
.overlay.select-list ol.list-group li {
font-size: @ui-font-size;
}

.status-bar {
font-size: @ui-font-size;
height: @ui-font-size * 2;
line-height: @ui-font-size * 2 - 4;
}

.tab-bar .tab, .tab-bar .tab.active, .tab.sortable {
font-size: @ui-font-size *1.2;
height: @ui-font-size * 1.6;
}

.list-inline {
height: @ui-font-size * 2;
}

.tree-view {
font-size: @ui-font-size;
}

In addition, I have open the theme file (~/.atom/packages/hip-light-ui-theme/stylesheets/ui-variables.less),
and modified line 72:
@font-size: 16px;

This fixes the Preferences panel texts.

And here is a screenshot, how it looks like:

I’m pretty happy with the result. I can start coding:)
Only the copy-paste needs to be fixed and Cmd button under linux, and it is the ultimate happiness.

Debugging the gui like this, is absolutely outstanding.

Thank you again.


#16

I couldn’t agree more :grinning:

You’re very welcome. I’m glad I could help :beers:


#17

Using 0.190.0, I find that the following styles.less works well:

@ui-font-size:20px;

body, atom-notification {
  font-size: @ui-font-size;
}

.tab-bar, .tab-bar .tab, .tab-bar .tab.active, .tab.sortable {
  height: @ui-font-size*2.5;
}

Unfortunately, the text in the Developer Tools windows remains unreadable (as it was with earlier suggestions). Any suggestions on how to fix that?

Also, It looks like the underlying chrome issue was fixed a couple days ago, so hopefully it won’t be too long before the fix makes it’s way to Atom.


#18

Maybe this package helps: https://atom.io/packages/hidpi

Haven’t tried it myself yet.


#19

Works like a charm. I don’t need anything at all styles.less now.
Thanks!


#20

Awesome, thanks for the info.