I'm aware that I can disable font scaling globally in my React Native app by putting Text.defaultProps.allowFontScaling = false in the constructor of the root component (i.e. in the root index.js or App.js file). However, is there a way to allow a max value for scaling, instead of disabling it completely?
I've tried adjustsFontSizeToFit = true thinking it would prevent text from scaling up to really large sizes (which it does), but now all the text becomes too small and it breaks the styling of the app.
I've tried using minimumFontScale in combination with adjustsFontSizeToFit above, since according to the docs, minimumFontScale "specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled." I set this value to 1.0 but the text still scales up to a ridiculously unreadable size (for example, if the "Larger Accessibility Size" is enabled in iOS and set to max scale) and setting it to a lower value (for example 0.25) allows the text to fit reasonably in my app, but the spacing and relative sizing becomes broken.
It would be nice if the text would remain it's default size, and still be allowed to scale up with "Accessibility Size" enabled in iOS, but only to a certain point–is there a way to achieve this?
In react native 0.58+ you can use the new prop maxFontSizeMultiplier inside the Text Component https://facebook.github.io/react-native/docs/text#maxfontsizemultiplier
You can use
allowFontScaling={false}
along with
Math.min(PixelRatio.getFontScale() * yourFontSizeBase, yourFontSizeBase)
to limit the max font size.
Related
I want to change font sizes depending on breakpoints globally through redux, what is the standard way to scale typography for different screen sizes for mobile apps.
Can someone please guide me whether this is font sizes changed in accessibility settings or these are guidelines for setting font sizes for different screen sizes ie: small, medium, etc
and if yes then what exactly what is the screen size of small device and which screen sizes are defined in small. I need a standard for all break points(screen sizes)
enter image description here
I have tried scaled metrics and changing font Sizes using the dimensions library in react native but my CTO is saying that it doesn't scale properly according to apple's guidelines
I used scaled metrics and changing font Sizes using the dimensions library in react native but it doesn't scale properly according to apple's guidelines.
Since React Native uses only pixels or percentages for units, how do we handle accessibility of larger text?
I know I can disable font scaling, but that is what I specifically do not want to do.
I am asking specifically for TextInput since there are other parts of the screen which won't change even if you scale up like the bottom nav bar. Because say we set a widget for time input on the browser we can say 5em to limit it to 5 character sizes regardless of the size of the text.
One way I can think of is to use * 16 in place of em but that does not work when you scale up the font since 16 is fixed.
Also I am looking for something that works in Expo. AccessibilityInfo does not appear to provide the size and I can't find any information on accessing the value of Dynamic Type
My crazy idea at the moment is to have a transparent Text that I has an onLayout and I obtain the size of the component and set it in a context that all my custom TextInput will use as a measurement that has a size based on number of characters.
react-native-elements is utilizing a helper function called normalize for font scaling which is implemented as follows.
import { moderateScale } from 'react-native-size-matters';
function normalize(number, factor = 0.25) {
return moderateScale(number, factor);
}
export default normalize
I'm currently using react-native-size-matters on developing UIs for multiple devices along with above font scaling by react-native-elements. Works fine in almost all the time.
Check out the react-native-size-matters repo is you have doubts on the implementation. Author has a good article written on explaining his approach as well.
PixelRatio.getFontScale() allows you to get the font scale that adjusts its number based on the user's choice of dynamic type.
The number you can use as a multiplier on the widths to increase or decrease depending on the font size if a dynamic font size is used.
One thing to note though, changing the size does not trigger a re-render unlike useColorScheme() since there's no context provided that has this information.
I've got a UWP app with a map view. For some of my MapIcons, I need to set a custom image. Others use the default image. My custom image is approximately the same size as the default image. Additionally, I generated different sizes for different screen scales, and named them accordingly (for example, MyIcon.scale-200.png, etc).
I tested this by running the app on my computer, a Surface Pro, and setting the scaling to different values in the Settings app. It seems to work. As I choose larger scales, I get larger custom MapIcons, and the custom icon is similar in size to the default icon.
However, my customers report that it is not working correctly when I distribute my app. They are sending me screen shots that show the custom MapIcon either much larger, or noticeably smaller than the default one. I can't reproduce or explain these results.
What could cause this?
wxWidgets 3.1 claims to fix the Windows High DPI issues. It works too but I see blur UI (fonts/bitmaps) looks stretched.
I went through the https://learn.microsoft.com/en-us/windows/desktop/hidpi/high-dpi-desktop-application-development-on-windows
I did the manifest changes to make my application DPI-aware, it removed the blur effect but application layout went wrong, every layout looks smaller (unusable UI).
Note* issue more vigilant on 3K and 4K system. Hardcoded pixel sizes are not scaling (like 400px width button, 500pixel width panel etc).
wxWidgets gives you a (relatively simple) way to make your application work in high DPI, but doesn't -- and can't -- do it automatically for you, in particular only sizer-based layouts without hardcoded pixel sizes will work correctly and you do need to provide your own higher definition artwork.
Concerning the existing pixel values, the simplest (even though not really the best) way to make them work better is to put FromDIP() calls around them.
Also note that you don't need to do anything special for pixel values in XRC, they're already interpreted as being resolution-independent pixels and are scaled according to the DPI automatically.
I find great support for very small edge width and node border width, very useful when we zoom in deeply:
cy.edges().style({"width": 0.01})
cy.nodes().style({“border-width”: 0.01})
but font-size is less malleable: any font-size less than 1 appears to be clamped to 1. Thus the last three of the following commands, executed from the javascript console, produce the same result:
cy.nodes().style({"font-size": 10}) // big font
cy.nodes().style({"font-size": 1}) // much smaller
cy.nodes().style({"font-size": 0.1}) // unchanged
cy.nodes().style({"font-size": 0.01}) // unchanged
In each case (using the last as an example) the font-size property seems to be properly assigned:
cy.nodes().style("font-size”) // “0.01px"
But the rendered node size remains at 1. Any ideas?
Thanks!
Paul
This has been answered on Github. This is an issue that some browsers have, and there's nothing that can be done in the library to change the browser's behaviour
--
Copied from Github : https://github.com/cytoscape/cytoscape.js/issues/1173
This is a limitation of how browsers implement font rendering in canvas. There's nothing we can do in this case on the library side.
The only suggestion I have is to scale up your styles. Multiply your sizes by a factor such that the font size is at least 1px. While font sizes can't scale, the zoom level can scale arbitrarily. Your zoom levels will be different, but zoom is just a relative measure anyway.