In firefox you can change the setting by clicking on View -> Zoom -> Checking the Zoom Text Only feature. In Chrome I see there is an extension you can add to do this [1], but I could not find a native control in chrome. Then you can zoom in and out with your normal CTRL+MouseWheel but it will only be the text. This can also be a native feature with certain OS level text size settings that some browsers inherit that too via the OS text size percentage change or an accessibility feature change for text size.
Below is a small app [2] to demonstrate the issue. When text zooming is enabled, you'll see the cards PX width stay static in size when the text is resized. However the em version scales with the text. I made a tiny function for this example to also demonstrate a programmatic way to convert from PX to EM as needed. Does this help explain better ? If not I could try some screen shots instead, not sure if they would get stripped. Thanks again! [1] https://chrome.google.com/webstore/detail/zoom-text-only/jamhfhbppcmkgghlkeieococonlbppjg?hl=en-US [2] <?xml version="1.0" encoding="utf-8"?> <j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:j="library://ns.apache.org/royale/jewel" applicationComplete="onApplicationComplete()" > <fx:Script> <![CDATA[ /** * Convenience method to convert PX to EM and outputs a CSS style string for width */ public function widthPxToEMString(pixelCount:int, fontSize:int):String { return "width:" + String(pixelCount / fontSize) + "em;"; } public function onApplicationComplete():void { cardEMAssignByMethod.style = widthPxToEMString(325, 14); } ]]> </fx:Script> <j:initialView> <j:View id="viewContainer" percentHeight="100"> <j:beads> <j:VerticalLayout gap="10" /> </j:beads> <!-- PX standard, only works with zoom, pixel assigned width --> <j:Card id="cardPXTest" width="325"> <j:Label text="The quick brown fox jumps over the lazy dog." /> </j:Card> <!-- EM based, static assignment, Text sizing and zoom safe --> <j:Card id="cardEMManualStyle" style="width:23.214em"> <j:Label text="The quick brown fox jumps over the lazy dog." /> </j:Card> <!-- EM based, method assigned, Text sizing and zoom safe --> <j:Card id="cardEMAssignByMethod"> <j:Label text="The quick brown fox jumps over the lazy dog." /> </j:Card> </j:View> </j:initialView> </j:Application> -Mark K -----Original Message----- From: Carlos Rovira [mailto:carlosrov...@apache.org] Sent: Thursday, January 10, 2019 2:58 PM To: dev@royale.apache.org Subject: [Non-DoD Source] Using em vs px (was. Re: Things that we still doesn't have and need in UIBase sizing) Hi Mark, renaming this since I thing is very different topic. I must say that I don't understand completely what you are trying to share, But I'm completely open to make changes from px to em or viceversa if we get a better result. So first: El jue., 10 ene. 2019 a las 20:31, Kessler CTR Mark J (<mark.kessler....@usmc.mil.invalid>) escribió: > I have a side question on this topic of size and size properties. I'm > just finishing up a 10 day test conversion of a small application interface > and was surprised to see us use PX a lot in the layout when it's on the JS > side of things. I was specifically using the jewel set to test with. When > I scaled the application it still looked acceptable, however if only the > font-size / text size was changed (via accessibility or browser setting) > then everything scaled poorly. I tried in Chrome (for example) to do CMD+ and CMD- to increase/decrease font size and things scale right for me. Maybe you are referring to another kind of size changes? > I overrode a good chunk of CSS by applying each new css file as a theme in > order I wanted them to override each other. What I changed was PX > references to EM. EM is based on the font-size by 1px font = 1/16 of EM. > So a font-size 16px would be a natural 1EM. Then the font-size scaling and > the regular scaling both worked. > I think you share your changes I can try in JewelTheme and if valid I can integrate it...maybe a PR? As I worked this latest months with Jewel I'm finding I need to do some adjustments to font, icon and some other sizes so different combinations play nice together. Is something I have in my TODO list, but since I'm finishing our first Royale App, I'm very busy for that now. Hope in few days/weeks do that... > > Would it be feasible to make the PX assignments on the JS side get run > through a static function to convert it to EM instead? > I think I need here that you share in some code example what you have in mind...can't figure just with that phrase, sorry. Thanks for sharing Mark! :) > > -Mark K > > -- Carlos Rovira http://about.me/carlosrovira
