Clipped Text & Shadows - javascript

I'm trying to get the text in this example to display properly, but I keeps clipping text & shadows in various letters and I can't figure out why and how to fix it.
Here's a jsfiddle (Removed), so you can understand it fully. Please refresh the jsfiddle once it loads, as the first letter clipping doesn't appear like it does on a regular published page.
The problem is on load (after you refresh) the 'F' & it's shadow will be clipped. Then, mouseover the text - 'Second' will appear, then mouseout and first word will appear again, but then 't' shadow is clipped.
Can't figure out how to fix these. Could someone please help me clear these clipping bugs.
Thanks, Bill
UPDATE: I figured out the 'F' letter clipping problem (updated jsfiddle) - I will need help w/ the 't' clipping - Thanks, Bill
BUMP - Someone? Pretty Please - Bill

This problem has to do with the way fonts are rendered. Certain fonts (like the one you're embedding) have serifs which extend beyond the "box" of the letter itself. In typical typography, this is handled by allowing the render area to extend beyond the box itself - because most applications don't make a box around each letter.
I think the issue you're having stems from the fact that each letter is actually a <span>, which means that it does, in fact, have a box. Your JS is then messing with opacity, overflow and positioning, which causes the CSS rendering to box off each individual <span> as it is being rendered.
My suggestion would be to avoid using the explicit widths / overflows that you're applying to the spans, and instead let them auto-size, and control absolute positioning.
If each span has the same z-index, and they are spaced correctly, this should give you what you're looking for, without causing clipping.
UPDATE:
The issue is that the font renders in a fashion which overlaps letters (as many script-style fonts do). As a result, you -must- render this font in such a way that it extends beyond the bounds of it's box.
However, when CSS from the plugin turns the individual letters partially transparent, transparent items can't extend beyond the outsides of their boxes... so the clipping occurs.
The solution is to increase the size of the box sufficiently that the clipping doesn't occur, and allow the boxes to overlap.
In other words, the trick is to provide padding-right and padding-left which give the font letters enough space to fully express, then adjust with negative margin-left, to move the letters back together.
For this font, at this size, the style which makes it work is:
.lslide_wrap a span span.sl-w1 {
...
/* Add the following 2 lines: */
padding: 0 100px 0 22px;
margin-left: -22px;
}
An updated version of the original jsFiddle can be found here.

Related

Position variable-size elements on screen

Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link

Manipulating Inline Text with JQuery or CSS3 Transitions (or both)

Over the last two days I've been working on manipulating inline text that sits between <span> tags.
For something close to the effect I'm looking for, check this out:
http://jsfiddle.net/6uf96/5/
On JSFiddle, in the "Result" box, hover over the yellow "Activate Div". If you're on Chrome, the pink text rolls up as if it is a tape measure retracting, and the green text rolls out as if it is a tape measure being pulled out. That kind of sliding "appearing" and "disappearing" is the effect I'm going for.
To achieve this I'm using CSS transitions between letter spacing values (see "deletion" and "insertion" classes). The pink highlighted text transitions from normal spacing to highly negative spacing (to go from visible to invisible), and the green highlighted text transitions between highly negative spacing to normal spacing (to go from invisible to visible).
The issue is that this method really trips out the browsers. It works ok on Chrome (although it's quite jittery and there is sometimes trouble with the unhighlighted text). It doesn't seem to work on Safaari at all - the pink and green sections just disappear and appear respectively.
I've tried to achieve the effect using <div> tags with "overflow" and JQuery's .animate() (animating between high width and low width divs and hiding the overflow text that spills out of the low width div). This works really well until you have text that breaks the line - it doesn't work at all then, so this method seems to be out of the question (unless someone knows something that I don't).
So, the million dollar question: does anyone know of a plugin or another technique to do this kind of inline text manipulation, even across line breaks?
To get it working in Safari you need to use the prefixed version of transtions. Which means you need to add -webkit-transition to the regular transition.
I updated your jsFiddle accordingly: http://jsfiddle.net/6uf96/7/

Make text auto scale to parent container

I hope I do a good job explaining this.
I am making a Tumblr theme, and am setting up the post titles in a way that text won't overflow unto a second line if it is to long. I want to make the text grow smaller as it reaches the edge of the parent instead of dropping into a new line or getting cut off.
I tried fittext.js and bigtext.js, but I couldn't get either to work. And I do not think they would work for what I want, as fittext.js seems to be more responsive text, and bigtext.js always makes the text the same width as the parent which wouldn't work with what I want.
Does anyone know I can accomplish this? I'm a noob when it comes to Javascript, so keep that in mind when responding. ;D
The first step is to stop lines from breaking:
white-space:nowrap;
Then, you need to allow scrolling:
overflow:hidden;
Now you have access to scrollWidth. If it is bigger than offsetWidth, then the text is too big.
You can shrink the text one unit of font-size at a time (be it 0.1em, 1px, 1pt... whatever you want). Repeat this step until scrollWidth is less than or equal to offsetWidth. Ta-da!

Set DIV height so text is not cut or sliced horizontally

Is there any JS/CSS/jQuery magic I can work to identify whether the last visible bit of content in a div is being cut off, and slightly increase/decrease the DIV's height to prevent the cut off text?
Our system allows the user to enter "elements" containing XHTML (using a Telerik Edit control). We have an ElementList page, where we show all the user-entered elements. However, since the user-entered XHTML can be very large, on the list page we only want to show the first 3 lines of each. So I set the DIV containing the XHTML to a specific height equal to 3 rows of text, and set overflow: hidden. So far, so good.
However, since the user can enter XHTML, they can create tables with padding (or otherwise diverge from standard text height). The text within those cells appears to be sliced off horizontally, due to the combination of height and overflow: hidden. Our requirements person doesn't like the look of this; but of course we cannot restrict the XHTML editable by the end user.
Here is a JSFiddle example of the issue.
This question is not a duplicate of:
"Stopping cut off text in variable height div..." as that question involves "webkit-line-clamp" which is irrelevant to my situation. (and in any case, that question was never answered)
"Cut text by height, no truncate" as that question is about a DIV containing pure text; my DIV contains XHTML. You'll note in the JSFiddle that I'm already sizing the DIV height using the em measurement.
This issue has me completely baffled - I'm hoping the SO community can come to my rescue!
UPDATE:
Ultimately, I suspect this cannot be resolved using HTML/JS/jQuery. In fact, you can craft a table (or series of DIVs) with gradually increasing top-margins, such that there's no way to avoid slicing at least one of them.
Thanks to all for their responses. I'm marking one as an answer, because in my opinion, it's a particularly simple/elegant workaround.
This is not the solution you were looking for, but it might be a good design workaround.
I put a white gradient in the bottom of the div, so that it creates sort of a "visual ellipsis"
Take a look: http://jsfiddle.net/robertofrega/LkYjs/3/
It is not as ugly as when the text is simply cut.
Your trouble is coming from overflow:hidden;. This line is doing exactly what you tell it to do, namely hiding the overflow. Can you use overflow-y: auto or something like that? That along with a grippy (like SO uses on its text areas), should help you out.
Instead of having overflow:hidden, you could set it to auto and then check for the presence of a scrollbar upon submission of the content. See this thread:
detect elements overflow using jquery
Try CSS3 property: text-overflow and set it to ellipsis, the default value is clip

IE Filter Antialiasing problem

So i have a page with a bunch of images. And I have a function which fades out these layers using IE's opacity filter through javascript.
Now when i fade in these elements. I have to set the particular element (which has the opacity filter applied to it) with a background image or a background color (to prevent anti-aliasing of clear type fonts, read this for more http://www.jonathancross.com/projects/Ugly_font_anti-aliasing_problem_in_Internet_Explorer_6_7_and_8.html).
Now my questions are:
For a group of elements is there any better solution than a case structure for setting the background-image/background-color for each element?
Some text-boxes are not seen properly and appear to merge with the overall background image set (The background layer consists of a 1x1 px image which is repeated where ever necessary)
Thanks in advance!
There is a trick I have used... if the background behind the text is such that you can pick a solid color that will match it within a reasonable degree, you can use the following pair of CSS rules to do faux-antialiasing on the text, in IE only:
background-color: #CCCCCC; /pick the color that matches your background/
filter:progid:DXImageTransform.Microsoft.Chroma(color='#CCCCCC'); /use the same color here/
I "got around" this by disabling Anti-Aliasing in IE completely by appending an Opacity filter of 1.0 on every element on the page...
Ok, so it looks nasty - but at least everything looks like (and IE6/7 is nasty anyway ^_^).
You have to define the background on each element, there's no getting round that as far as I am aware. You could do this with css, something like
.mydiv p {background:#fff}
Using 1x1 px background causes repeating issues. Using 2x2 px does not.

Categories