Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
Related
I'm building media library web app and I want media items listed in a side bar to be fully displayed.
Excel has this neat feature where cells containing strings long enough to overflow automatically adjust the font size to exactly what is needed for the string to remain contained within its padded borders.
I'd like to recreate this with css.
I don't think there is possible to do so. You can, however, create mediaQueries and give different heights or line-heights.
You could use word-wrap: break-word in a div, to make sure the text reorganizes so It won't come out the div's width. However, It would remain with the same size. So, I would definitely use mediaqueries for that
This can't be achieved through CSS alone. Javascript could help you, but it won't be easy.
Try this post: JavaScript Scale Text to Fit in Fixed Div
I would like to know if it is possible to have line-breaking text that sometimes consists of one line and sometimes of two. I can best describe what i mean it with an image:
You would have to insert the text into separate elements which have the shape and size you want to achieve the effect you are going for. It is not possible with just one html tag.
As Watson said, you'll have to contain the elements in containers of a specific shape and size. You can't make them truly "fluid" as I think you're meaning to comment, however, you can use percentages for those containers to determine how much text is visible in space and possibly viewport sized text to try and properly fill those spaces. Definitely no manner in my mind that will allow you to easily create this in a universal method for all browsers. You're going to have a lot of ragged edges I'd suspect.
I'm trying to create a button, where the font is bold but it also uses a text-shadow to make the text more readable. For whatever reason the text-shadow is not appearing when its added to the CSS, though in photoshop it makes a dramatic difference using the same values.
Here's the JSFiddle
Thank you for your help
The shadow is there, but it's so faint that it's nigh impossible to perceive, especially with a relatively low alpha value and when superimposed on a background with a similar hue.
I'm going out on a limb and guessing that in Photoshop, your text shadow has a layer style that causes it to have a different effect on the underlying background color. You may need to play around with the eyedropper tool and tweak the alpha value in your text shadow, in order to achieve something that better matches your Photoshop comp.
I recently got a few designs made and am trying to slice and code them to get better at CSS. On my first design, I ran into some issues.
First, do I have too many divs? I have a wrapper around each section to allow the expandable background section on the left and right of the content to be a different color than the content itself. I also had to use a conditional style to get IE to position the ul correctly. Is there a better way to do that?
Second, would I make a div for each colored block in the content section? That would give me a white, blue, white, gray, and blue div all stacked onto each other. The main issue with that is going to be the parrot and the great price $199 emblem that breaks out of the div.
Here's what I got:
http://www.astigmaproductions.com/
Here's what it should look like:
http://www.astigmaproductions.com/ap.jpg
You're not using a reset css, which will lead to crossbrowser issues. Consider adding one. You will run into IE issues and in this case a conditional style is the way to go. But adding a reset will lead to less IE problems.
Since the parot breaks out of its div you shouldn't break everything into multiple divs. There is a gradient that is non-linear and lots of graphics going on in this header. Just grab the image and make it a big background (blue bg + grey line + parrot) and it should work. Add the skype and co. icons on top of that as well as the text.
If you want the text to be anti-aliased, try using sIFR or add the text to the main background.
That's pretty much it from what I see, you just need to start working and see if you run into issues.
...regardless of font size.
Its an mx:Text object. (The Text object is actually being used as a mask so don't know if that's the problem.) If underline is set with the <u> tag in Text.htmlText, or Text.textField.setTextFormat, the underline thickness is always just one pixel which is not acceptable. (There are other problems with <u> so I'm limited to using setTextFormat currently.)
Can the thickness of an underline be set through CSS? (textField.styleSheet, etc.)
I may have another problem as I already use setTextFormat extensively, and the documentation says you can't use textField.setTextFormat if you use textField.setStyleSheet.
I primarily need the underline to simulate correctly the look for an anchor tag.
its not even possible to do in html (you need to use border-bottom). i don't think this is possible.
Not possible with CSS or TextFormat.
A possible workaround would be using the textfield metrics (probably through getCharBoundaries()) to manually draw a line under the desired text. It can get quite messy for multiline text though.