Hi Mark, thanks for the info. I finally could reproduce the issue, was not aware of that, since I thought there was only one way to increase/decrease. So good to know.
To fix that we should go through all the components CSS rules to change px to em. I must say that I'm in a current point where I can't do this myself, so if you know clearly how to do this, do you want to do yourself and submit PRs so I can integrate in current codebase? let me know if that could be a plan. And many thanks for pointing this! :) Carlos El vie., 11 ene. 2019 a las 20:27, Kessler CTR Mark J (<mark.kessler....@usmc.mil.invalid>) escribió: > 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 > -- Carlos Rovira http://about.me/carlosrovira
