XPS 13 Screen Scalability Issue


#1

Hey all,

I have a developer edition of Dell’s XPS 13 laptop. This means I have a 13.3-inch UltraSharp™ QHD+ (3200 x 1800) InfinityEdge Touch Display, which has resulted in some programs having screen scalability issues: I’ll open up a program, and the fonts and interactive elements will appear super small. My OS is Ubuntu Gnome, and I generally love atom (even though I am new), but the tabs and items in the file-system browser are really small. I tried adjust things using a tweaking tool, and it increased the size in some parts, but the tabs and file-system browser remained rather minuscule. I suspect this has something to do with the atom editor itself, and I’ll need to configure it different, but I’m not sure how yet. Any assistance would be wonderful. The more detailed and “dumbed-down” the better.


#2

I actually solved my issue, by searching other discussions. I’ll detail the solution as follows, for those with similar issues:

  1. Find and open styles.less folder in atom.

  2. Add the following code to the bottom of the folder, and adjust “ui-font-size” as needed:

     @ui-font-size: 25px;

.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 .title {
  font-size: @ui-font-size;
}
.tree-view {
  font-size: @ui-font-size;
}

#3

This is a good reminder that UI theme developers should use rem and em units. That way you could have done html { font-size: 25px; } and it would scale up everywhere.


#4

I can recommend the hidpi package. its great for my 1920x1080 12.5" display. You can also manually set your preferred scale factor.


#5

Actually you should always use rem. Em has a lot of gotchas. I’ve used nothing but rem for some time now. Start of by setting your html font-size to 10 px and then you can consider the rem numbers to be pixels divided by 10 until you need to change rem. So 35 pixels is 3.5 rems.


#6

There are certainly valid use cases for em… For example, I like h1 { font-size: 2em; } much better than specifying 30 times the size of the h1 in different locations on the page, and it’s not really an element that contains a lot of others. It’s true that you got to be careful, but that doesn’t mean you should avoid it! Also I wouldn’t set the :root font size to 10px in Atom, because packages may be unaware that you did so and expect the default value of 16px.


#7

I had a brain lapse. I was thinking of a web page, not a package.

You realize this means “make h1 twice the size of the inherited font-size”, right? That changes the sematic of h1 from it’s normal meaning of a fixed size.


#8

Yep, that’s what em units do :wink:

The h1 rule above comes straight from Chrome’s user agent stylesheet, and it makes perfect sense in my opinion. Suppose I changed the :root font size to 40px. If the hX element had a fixed size, I would have to update them as well, because the :root font is now larger. If, on the other hand, the elements have a relative size of >1, the elements would automatically conform their semantics (even though 80px for the h1 elements could be a little over the top :stuck_out_tongue:).

I disagree that it changes the semantic of a h1, because the semantics and styling of an element are independent from each other. One can style the element in such a way that the styling doesn’t conform to the semantics, but that still doesn’t change the semantics of the element.

The h1 element, for example, indicates the largest possible heading of a document, perhaps the title of a chapter. I can still style it however I want, though, as long as it’s clear that it is the title of a chapter. I can also achieve that with color, text decorations, or just by centering the text.


#9

The em size if related to it’s immediate parent font-size not :root. If you have a :root size of 40px there is no guarantee your h1 will be 80px. It could be anything. rem fixes this by being tied to only one size for the whole document.


#10

I’m just trying to explain there are certain use cases for em. Sure, sometimes you want all your <h1>s on a page to be 80px, but sometimes you just want it to be larger than its surroundings. Different scenarios, different solutions…


#11

Sure. Instead of arguing I should have just explained how rem works and why I use it.


#12

Good stuff, I was struggling with this as well. Cheers!