I added a text to canvas with content "111111111111", font Arial, size 15pt. I got a text with border smaller than text width.
I also try with other font, but it work OK. My project prefer use Arial font.
Is any way to fix this bug. Thank all!
image border not fit text width
Related
I have a div class with an image src and within that I currently have a div for the dynamic text inside this although am open to suggestions.
<div class=“image-container”>
<img src=“/assets/product.jpg”)>
<div class="preview-container">
<img src="/assets/images/Product_1.jpg" class="prv-img">
<div class="preview-text">
<div class="text-outputs">
<p data-name=“line_1”>SAMPLE TEXT !</p>
<p data-name=“line_2”>SAMPLE TEXT 2</p>
<p data-name=“line_3”>SAMPLE TEXT3</p>
</div>
</div>
</div>
</div>
This image remains the same aspect ratio but the image size changes responsively either by jumping to breakpoint sizes, or for smaller screens sizing continuously dependent on screen width.
As hinted at in the code above, on top of this image I want to superimpose 3 lines of text that give the impression that this text is written on the image of the product itself. For some context, it is a photo of a bottle with a blank white label on it and I want to superimpose some words like, Drink XYX, crafted since 1923, Drink Responsibly
I want the text size, spacing, line height and relative positioning of the text on the image to scale continuously as the image changes size.
Any ideas on how to do this. Is it possible with just css or will I need some javascript too?
Any suggestions would be truly welcome.
Jason
If you don't want to use CSS, then I think you'll need to piggyback on the CSS used to size the image. Assuming you have #media entities that control the image size (either directly, or indirectly by resizing containers), you can add to or duplicate these with similar entries to control the font size in vw units or rem, as appropriate.
I realize this isn't the bulletproof general solution you might like -- if you change themes and the breakpoint widths change, you have to update the CSS also -- but it is a way to do it without JavaScript.
It would be great to have a way to size text proportional to its container.
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 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
In Firefox and Chrome and Safari (latest all, on Mac 10.6.8) if I use a browser's developer tools to reduce the font size of the following span, I can watch the height (line-height) of the paragraph increase by a few pixels :
<p style="line-height: 40px; background: red;">
Some sample text some sample text.
<span style="font-size: 100%;">As this span's text size gets smaller, the paragraph gets taller.</span>
</p>
Can someone explain why this happens?
Ok, so I posted your sample html and inline css into js fiddle, here's the link:
http://jsfiddle.net/sauhL/
I then used firebug to change font-size:100%; down to 99, 98 and so forth. You are right, when you go down 1 by 1 for the font-size value, the red box gets a little bigger for a second.
The problem is that you have line-height predetermined as 40px, which causes what you called a 'bug' because line-height applied to different font sizes leads to different height renderings, and in the case of js fiddle, the linebreak is also a factor in the 'rendering' of the red box's height. After going down several points in %, there's no more expanding of the red box but rather a diminishing of size.
This is easily fixed by applying line-height:100% to the span which normalizes the height and makes sure there's no odd increases. You can expect these kinds of 'bugs' or anomalies when mixing fixed values (say 40px for example) with percentual values (100% or whatever).
Hope this solves your question
When viewing the following test page with the browser in the BlackBerry 9630 simulator, the text width is wider than the screen width. So, when zoomed to 100%, one has to pan.
http://sites.inka.de/klee/blackberry/text.html
What solutions are there to make the text wrap to screen width?
The browser has a default width for the window, when you zoom, the window keep it's full width, so every website will have this problem.
You can't fix this, since it's an expected behavior.
If you don't want your user to zoom on your website, make the font bigger.
Found the solution:
<body style="margin: 0">
With the default margin, after loading the page, the cursor has the shape of a magnifying glass, allowing the user to zoom in, etc.