I'm using a font as a way to display vector images, and it has very wide glyphs. They happen to be so large they get out of the div they are in:
The blue gun is a rotating glyph contained in a div. When I try to get its size, it doesn't give me the full length of the glyph.
Because of that, I can't center it.
Thanks!
Seeing the CSS would definitely help. Without seeing that, my best thought would be setting max width as a percent to scale.
.your-selector.class{
max-width: 50%;
}
Related
I know how to change font size using CSS, and I know how to scale text inside a canvas, but is it possible to scale text outside of a canvas using CSS/JS?
My problem right now is that I want dynamic objects on a page to resize along with the page, but when there is text on those objects, it fails to resize correctly, since fonts only have sizes in full pixel amounts and not fractions I get "jitter" or "jumps" while the user is resizing. Using percent amounts on the fonts doesn't change the fact that there's no such thing as a "16.5" size font, a 30 character text will jump by at least 30 pixels per increment.
This also causes an issue with word wrapping giving inconsistent results between resizes, one word per line might decide to jump randomly to the next line or not based on the size:font relation and this snowballs for the entire paragraph.
Basically I want to get the same visual effect on every x,y window size without having to store all texts as images, and without creating a canvas for every single text that I use which sounds kind of ridiculous. Is this possible?
I believe your best bet for controlling typography to this degree is going to be with the vh, vw, and vmin & vmax CSS properties: These allow you to scale text based on the viewport height, width, and the smaller & larger of the two, respectively.
I personally find these work well at medium-to-larger size resolutions, but begin to breakdown at narrower viewport sizes, where it may be wiser to forgo this level of control. See Viewport Sized Typography on CSS-Tricks for usage and more information.
Per the GIF below, as you can see as I increase/decrease the window size the image on the left grows and shrinks as it 's supposed to. What I've done is include the line inside of the "image wrapper" that I have set up. My goal here is when the image shrinks I have the line line up with its respected block of text you see on the right. Right now I have the line positioned as absolute with percentage values for left and top. Is there a way to adjust the rotation of the line for what I'm trying to accomplish? How can I get that line to line up with the title no matter what? Are percentages possible for rotation? (I don't think so)
This raises one concern of mine. Sure, a CSS only solution would be great, but the concern is compatibility with browsers. If the solution can be in JavaScript that would be just as perfect, but I wouldn't know where to start with something like this for JS.
Any other suggestions are welcome.
GIF Example:
Code example used: https://jsfiddle.net/01sxrjkr/ *Make sure the preview window is <768px
You are rotating from the wrong end of the line. Try this instead, then just use media queries to alter the number of rotation degrees in relation to the text on the right for each of the most common media widths. Remember, people don't go around re-sizing their screens, so having it perfect at every single pixel of width is unnecessary and really not possible with what you have going on there. You're image is responsive and your text, of course, is not. therefor as the width of the screen is reduced, your left column decreases in height as your image gets smaller while your right column increases in height as more text wraps.
.line.line-1 {
left: 62%;
top: 39%;
transform: rotate(14deg);
width: 40%;
}
Im trying to use css3 scale property, but im facing issues with alignment of preceding elements
I see lots of spacing created after an element is scaled using css3.
Trying to place an images and titles beside it for a list. But when image is scaled the tile is pushed down. don't want to use absolute as it may give bad impact in different devices and page re-size
Here is the fiddle http://jsfiddle.net/sonymax46/xhwcvmj8
Also can you elaborate why this is happening
Can some one help me out.
Instead of scale through the transform property, adapt the width and height of the element to the desire size. If you don't do so, the element is going to keep the original size, resulting in that blank space.
Then you can set correctly the image size using this CSS:
background-size: contain;
background-repeat: no-repeat;
Here you have your jsfiddle updated.
I am building a website for my tennis club: http://users.aber.ac.uk/dwd/aut/
Can anyone tell me why it looks zoomed in and push to the right? Click view source to see the HTML/CSS/Javascript as its quite a lot to post in the comment thread.
If you zoom out once that's what the site SHOULD look like.
Any ideas guys?
Dan
You've set the content to have an above average width and absolutely positioned it some distance from the left of the page.
It looks lopsided because it's not properly centre-aligned (if you use the Ctrl+- shortcut it becomes more obvious)
If you remove position: absolute; from #wrapper it displays correctly centred for me (in Chrome)
Remove the font-size from the body CSS, and then remove position: absolute and left: 12em from your #wrapper div.
Others have pointed out why this is happening. Here's some more points, though:
to truly centre a container, use a value of auto on the margin X/Y axes. You are doing this currently, but it's being undermined by the fact that you have also specified absolute positioning, so remove the latter
incidentally, your current attempt to centre may work on your screen, but on a different resolution it will not, since you're essentially just bumping the page to the right by an arbitrary number of pixels
whilst a target resolution is something every site designer has to decide for him/herself, the standard is to make the page work in 1024 * 768. Your page container is currently 1024 pixels in width along, with a further 32px padding added either side. Either reduce your width or take advantage of the CSS property box-sizing, which means any specified padding eats into your element's width, rather than adding to it
So I've got a page that shows an image with some absolutely positioned text on top of it.
I want to write a print style sheet for it so that:
the image is resized to fit the width of the page
the text is repositioned and resized to maintain relative position and size with the image behind it
So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?
And yes, this question might be more appropriate for DocType, but I've yet to get any help over there.
My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.
To fix it, all I needed to do was set overflow: none.
The overflow: auto was what was making it print like
(source: github.com)
I think you could happily leave it to the printer driver if you trim off the whitespace around the images, and then replace the margins on-screen with css, and the remove it again in a print-media stylesheet. Buiding-in the page margins is going to cause problems.