I'd like to know if it's possible to reproduce in CSS/HTML the effect you see in this magazine, with an image floated between 2 columns of text and the text wrapping around it:
I know only modern browsers support 2-column layouts, so my questions are:
Can this be done in modern browsers? If so, how? We are essentially doing a "float:both" but ofc that directive doesn't exist....
Is there any backward compatible hack to sort of do it in older browsers?
Finally, if you can do this in HTML/CSS, I would think the image would still have to be square, so that the wrapping effect would not be as organic as it is here. Would it be possible to reproduce the effect exactly, rather than having the image square with whitespace, eg, to the left and right of Ron Paul's head? Would you have to slice up the image to accomplish that?
It's not easily doable (especially for dynamic text). All the techniques have various downsides.
Here's one possible technique for "float center":
http://css-tricks.com/9048-float-center/
For modern browsers, there's a jQuery plugin that can do it precisely:
http://www.jwf.us/projects/jQSlickWrap/
Here's the tedious, manual version that inspired the above jQuery plugin:
http://www.alistapart.com/articles/sandbags
Curvelicious Otherwise known as a ragged float by Eric Meyer.
Also Sandbags
Related
As I understand it in modern web-development horizontally aligning elements side by side is by using float (for example three column layout is achieved by floating two to one direction and one the other). However this does bring out various problems and at the moment I am working on a website that require seperate columns in both header and content thus I need to float pretty much everything and set up various margins and widths to keep them from jumping all over the place.
With HTML5 and CSS3 on the rise I am wondering whether there is something to replace floating with easier solution? As it is HTML5 and CSS3 introduce easier ways to make certain things happen (like rounding corners with border-radius) so one would think with multiple columns in a website being almost non-avoidable something to ease that hassle would be invented.
Yes, it's flexbox, or CSS Flexible Box Layout Module.
The spec seems to be reasonably stable as it has reached Candidate Recommendation status. I don't know how good browser support is for this latest version.
Here's a recent article.
Have you looked at any of the responsive frameworks like Twitter Bootstrap? With a responsive framework, it's very easy to setup columns dependent on the screen size.
To my knowledge, there is no built in CSS property of columns beside creating your own with floats and dynamic widths.
Is it possible to wrap text around a non rectangular image?
I want text around maps of different countries to wrap around the country's shape in such a way that the text always keeps the same distance from the country's border even though the border itself isn't straight.
Is this possible?
You can use this method, where you float divs to block off the shape's area.
So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.
It looks like that kind of support is on the horizon.
As Dave said, there is CSSTextWrapper, which is probably the best way to do it at the moment, but a relatively recent W3C working draft outlines a method to use more complex shapes using SVGs, and perhaps raster images with outline detection.
How long it will take for it to be implemented in major browsers, let alone finished, is anyone's guess.
At the moment, it can be done, with difficulty. With luck, it will be much easier in the future.
There's a jQuery plugin called Bagon designed to do exactly this.
As others have already said: yes, it's possible... but it's not so difficult.
Customers tend to like this kind or wrapping, at the end I made a script for it: http://www.miguel-svq.com/textwrap.html
This can use floating divs or slice the image, as you prefer.
There's the well-supported shape-outside CSS property. You can even just give it the PNG and it'll figure out the shape from the alpha channel.
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
Send the text to the server, have the server render an image, display the image. Voilà.
I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
*{
margin:0;
padding:0;
}
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.
I'm developing a web application that has a certain layout.
I'm mainly using CSS for styling the buttons and using divs and styling them for other layout items.
The problem is that sometimes I need a layout item to be non-rectangular.
Also- designing SVG is easeer and sometimes may produce better results.
My question is: should I use CSS always for the layout, and for instance- combine divs to achieve the non-rectangular effect- or should I use SVG for some of the layout items?
Also- what about the buttons- CSS or SVG?
Thanks!
Bear in mind that SVG isn't supported in older browsers. In particular, in IE8 and earlier. Using SVG will therefore limit your audience.
It is possible to rig older versions of IE to support SVG - there are a number of Javascript libraries which can convert SVG into VML, which was Microsoft's proprietary alternative to SVG. However, this does mean you're running Javascript code unnecessarily; you could cause performance issues in IE, or worse, it could load slow enough that the layout redraws after its loaded.
Therefore, for cross-browser compatiblity reasons, I would suggest not using SVG for your basic page layout.
Where I would use SVG is for graphs and charts, etc. For these, I would use the Raphael javascript library, which makes drawing SVG very easy, and also renders it as VML in IE, without you having to do any explicit conversion.
For creating non-square elements in CSS, there is a hack which uses the CSS borders to draw triangles and other shapes. This works in all browsers (with some minor caveats in IE6), so is great for creating spot-effects like marker arrows and speech bubbles.
See http://jonrohan.me/guide/css/creating-triangles-in-css/ for more info on this.
Great for spot effects, but should stress that I wouldn't recommend it for complex shapes; I have seen some people drawing entire pictures using it -- see http://www.cssplay.co.uk/menu/fivestar and other hacks on the same site -- but as I say, I wouldn't suggest actually doing this, except just to demo a hack like this guy.
Hope that helps.
[EDIT]
Per the OP's comments, he only wants to add a rectangular protruding part to a larger rectangular <div>, so in fact the shape he's trying to create isn't all that complex after all; in fact, it sounds a lot like a tab. Given this, the best recommendation by far is to forget about drawing it with SVG, and simply create two divs: one for the main content and one for the tab. If necessary, a third div can be created to wrap the other two. This may be helpful for referencing the two others together via CSS or Javascript.
I tend to advise you not using SVG for the layout, it's not really its purpose. It's best suited for diagrams, pictograms, charts or maps etc.
using SVG will have disavantages:
-First, support: IE<9 doesnt support SVG, or you'd need an external plugin.
-Integration: it's easy to have SVG inside HTML, but emmbeding HTML in SVG is quite unpractical.
-flow in layout: you can draw shapes easily, but placing blocks/text has to be done manually. in html two consecutive blocks will be displayed one below the second. In SVG you have to place them absolutely, ensure text inside them isn't too long cause their size won't adjust automatically.
I'm almost sure it would be easier to layout with HTML+CSS. And now with CSS3 you can rotate blocks, round borders, cast shadow. I would like to know which particular layout cause you problems.
We are in 2017 now, I belive that all major browsers support SVG.
So I would say SVG is a good option. You will probably need to use JavaScript to adjust elements on the screen and make them responsive, because SVG does not provide things such as flexbox, tables, float, etc. The advantage with that is that you will have more flexibility and will not have to deal with the limitations and side effects of CSS.
I am in this situation:
I have to do rounded corners and shadow for some boxes on web design. So far I do not have all design and I don't know how many boxes I will have.
In this moment I have 2 different sizes on "width" and of course re-sizable on "height".
The question is:
Which technology you suggest to me to use in this situation ?
PS: Usually I go with css, making 2 or 3 images for boxes with same "width" size
But now I think: "Maybe it is an old style, already", too many css classes, not automatic ...etc ?
Maybe I can use Jquery (js) -- (which usually i try to avoid because it is kind of heavy not like css, but I have jquery included already ) and should I ?
To use css3, (but problem in IE7/8) ?
To use different way ?
What do you think guys, what is the best practice on this stage of implementation ?
Updated:
Because I am starting a new project I would like to now the best practice:
I am not stacked or cannot do this and I know as well several way/plugins in jquery or CSS3, question was not which plugin or how to hack IE, but "Should I use js/hacks, in my case?"
If I use, JS, I will not have pure css/HTML which is faster -- js is heavy -> MINUS
JS make more dynamically/easier and less HTML/CSS code -- ->Plus
I would like to have an advice about this stuff
Thanks
etc ...
Check out http://css3pie.com/ for limited CSS3 support in IE 6-8
Use CSS3 and let IE7 and 8 have square corners. It's the only sane way to go about it. There's all sorts of ways to use images and JS for IE7/8 but having done it more than once, I really suggest not.