I am making a paragraph of text using a number of SpanElements within a ParagraphElement, all inside a TextFlow. It also has a number of InlineGaphicElements, some of which have a height greater than the text line height. In these cases I'd like the graphic to be positioned so that the text aligns with the middle of the image.
The most obvious thing I've found that would seem to do this is setting the VerticalAlignment property within the InlineGaphicElements to VerticalAlignment.MIDDLE, but these seems to make no difference, no matter what I set it to. I think this is because it can only be applied to an entire TextFlow inside a container.
I'm hitting a bit of a wall with this so any help would be much appreciated!
Set InlineGaphicElements baselineShift.
Related
I have a sidebar with a display name and the problem is if the user name is too long it will go beyond the container. I tried to use Jquery FitText but it doesn't seem to do what i want unless i'm doing something wrong. Function to resize is always called even if i change browser window size and the container where the name is didn't change anything. Is there a way to make the text fit the container without going beyond it?
This is actually possible with pure CSS.
Here is a great article: https://css-tricks.com/viewport-sized-typography/.
UPDATE
The issue with using pure CSS is that the text will always fit the viewport. The following custom solution only changes the text size if it overflows the containing box: jsfiddle.net/0swbytek
Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
I have some little problem setting the right height of some informative boxes.
If you go in this example page you can simply understand what my problem is: http://onofri.org/example/example3/test2.html
As you can see under the Main Report area I have 3 boxes.
The problem occurs in the boxes titled as Links and in Work Supported by Japanese Trust Found
As you can see these boxes contain some informative text. The problem is that if I enlarge the character (in the browser, using CTRL+) this informative text goes out of the box (it goes out of the bottom of the box)
Is there a way to solve this problem? I want that box always contains its content.
Thanks in advance.
Use the min-height property to set the height. This allows the boxes to "grow" when needed.
Here's an example: http://jsfiddle.net/43MjD/4/
Don't give the div a height so the box will expand as the text does.
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.