search

AnalyticalGraphicsInc / gltf-vscode

This is an extension for Visual Studio Code to add support for editing glTF files.
Apache License 2.0
461 stars 63 forks source link

In glTF Tools 2.3.0, the three.js button is sticking out of the menu #190

Closed cx20 closed 4 years ago

cx20 commented 4 years ago

I tried glTF Tools 2.3.0. However, the button of three.js seems to be out of the menu.

image

Unfortunately, I don't remember how it was in the previous version.

It may have something to do with the environment (Japanese OS, Japanese fonts, etc.). If you can tell me where to look, I'll confirm it.

cx20 commented 4 years ago

I tried changing the CSS font part locally as a trial. 13px seems to fit in the menu. https://github.com/AnalyticalGraphicsInc/gltf-vscode/blob/7c4c080e69eae5441af4c3ab4018509fff7bea3f/pages/previewModel.css#L7

font size menuUI
font: 13px sans-serif; image
font: 14px sans-serif; image
font: 15px sans-serif; image
cx20 commented 4 years ago

When we used sans-serif, the actual font is different between Japanese fonts and English fonts, so the size seems to be different. https://twitter.com/clockmaker/status/859263366769946624

lang sample
"ja" image
"en" image
cx20 commented 4 years ago

Below is the result of trying sans-serif font using Chrome browser on Japanese Windows 10.

https://w3g.jp/sample/css/font-family#sans-serif image

https://w3g.jp/sample/css/font-family#japanese image

It seems that the sans-serif font is actually assigned to the Meiryo font. I haven't tried it because I don't have an English Windows 10, but I think the font assigned to sans-serif is probably different.

emackey commented 4 years ago

Thanks @cx20. The sans-serif font in English is "Arial".

I think the box needs to be wider. In particular, if #mainUI.width was 325px, maybe it would fit?

Also I wonder if the UI is too wide now with 4 buttons across, maybe on thinner windows it could collapse to a 2x2 arrangement of buttons.

cx20 commented 4 years ago

Thanks @emackey.

he sans-serif font in English is "Arial".

I learned a lot. Thank you for the information.

if #mainUI.width was 325px, maybe it would fit?

Yes, 325px is just barely enough, so 330px looked like a good choice. I've tried several combinations of main UI sizes and fonts.

image (If I make a table in markdown, the images in the cells are automatically resized, so I combined them into one image in Excel for comparison.)

Also I wonder if the UI is too wide now with 4 buttons across, maybe on thinner windows it could collapse to a 2x2 arrangement of buttons.

I agree. we might want to change the layout to 2x2 if we have a smaller window size. if we have more glTF Viewers, we might need to think about 3x2, etc.