I have a draggable / resizable canvas element contained within a div.
When the div is expanded, the canvas element is too.
The canvas element has some text -> context.font("100% Impact");.
Every browser renders it fine, but Safari seems to display same sized text no matter what percentage value I put in.
50% renders the same 100% renders the same as 1000%...
Does anybody know how to fix this?
Thanks!
EDIT:
I tried defining initial font size on the html and body =>
html, body { font-size: 16px; }
but no luck...
One reason might be because your font size is smaller than the minimum acceptable by 'user'
On: Safari-Preferences-Advanced tab
it's an option Universal access - never use font sizes smaller than....
So no matter what font-size you set it will never be smaller than that limit
Related
I am currently learning css and I have encountered some question about the SVG img. I have discovered that some SVG will take up the whole width of webpage if their width or height are not set, while some don’t and have a defined size. What does this property called? Is it related to the design of SVG image? example
Also, if I put a SVG which takes up the whole width of webpage into a flex box, the SVG will decrease in size. Why does this happen? Considing that a normal image and a SVG with defined size will not decrease the size in the same situation.example(fixed with class = "flex" instead of id).
I am also wondering how does the computer determine what size should the SVG decreased to? I have tried a few SVG(which take whole width) and almost each of them will decreased to a value near 150px x 150px in the flex box.
outer <svg> elements are replaced elements in CSS/HTML parlance and follow the rules for replaced element sizing
In particular if replaced elements have no defined size the browser falls back to a size of 300px x 150px, which is likely what you're seeing.
Normal i.e. raster images always have a defined size and are not replaced elements.
See also the SVG specification for how CSS affects SVG sizing
One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.
So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?
The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)
So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.
You should try using em instead of px..
For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.
If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).
You should try use "rem" (support most of the browsers).
Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;
On my page http://www.somersetsights.co.za/en/index.html I have 4 div's (div.service) width text in it. The first three div's have a width of 256px. Div number 4 has width of 900px (inline style width:auto).
When I display my page on my iMac and my iPad all 4 div's have the same text size and text style. On my iPhone the text of div number 4 has a different text size and style as the first three div's.
When I define the width of div number 4 also with 256px the text size and style is the same as in the other three div's. As soon as the width is back to 900px text size and style is changing. As I said this happens only on my iPhone. Not on my iPad and my iMac.
What do I have to do to avoid text size and style change when I increase div width?
I can't simulate the situation with Chrome Dev Tools, but when I try to access your website from the iPhone Simulator I can actually see the problem.
But I guess that's because of CSS; in style.css, at row 18, you declare font-size: 100%;, and this declaration is propagated to the text in your div.service.
Probably when you override the width of the div, the size of the font is computed accordingly to it. The difference in behavior could be due to a bug in Safari or simply because of the different properties of iOS screen (scale factor, orientation, virtual size of desktop, ...).
Try replacing font-size: 100%; with another size, for example 12px or in em maybe. Then the font size shouldn't be influenced by div's width anymore.
I'm designing a website and using jquery UI majorly for the icons/icon-classes it provides.
While testing in chrome what I see the default height of a span element which wraps some text without padding or border gets a height of 20 px.
I understand it will differ with the type of font and size, the defaults and the browser. Is there anyway I can set height of a text to a given size?
If I understand correctly, it seems your facing this problem because of the way different browsers render fonts.
If you font sizes are influencing their parent elements size, then you may need to rethink how you are using margins and padding's.
EDIT
You could use line-height to try and tame the behavior.
I'm building a Google Chrome extension and need to have a particular <div> tag resizable. This works, but it can only be resized to be larger than its original size, not smaller.
According to this question, this is set by the browser.
Are there any workarounds that allow the div to be made smaller?
AFAIK, there is currently no way to use a CSS resize attribute without a fixed minimum width unless you explicitly set that width.
If you wanted to resize a DIV that is currently 200px to 100px in height, you have to set the styles height to 100px to force the resize attribute to start resizing from there.