Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
Look at http://www.webdesignerdepot.com/2013/05/how-to-optimize-for-legibility-using-text-rendering/ or Google it for many more articles. Support for the optimizeLegibility setting is pretty good. The text-rendering property has four settings: auto: allows the browser to choose a setting itself (generally defaults to optimizeSpeed) optimizeSpeed: focuses on speed optimizeLegibility: focuses on advanced rendering geometricPrecision: precise rendering optimizeLegibility will improve kerning and add ligature substitution. geometricPrecision (minimally supported, just Chrome, I think) allegedly calculates subpixel kerning values and prioritizes kerning over any other property. Rick Gordon On 7/9/14 9:54 AM, "Elli Vizcaino" wrote: A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. Thanks you guys for all the input. Yes it seems to be the font metrics as when I resized the text in the test div it the same spacing issue appeared. I decided to use a negative margin in percentages though and that seems to work, at least in Chrome. Have not done full testing across browsers yet. I would recommend to redo the SVG as an image since the can be scaled as a percentage width of the header and would look much more graceful as you re-sized the view-port. The only problem is it also fails in IE12. Will have to experiment with this later ... thanks for the demos and if you can leave them up for awhile would greatly appreciate it. Just curious if text-rendering:optimizeLegibility might help. I've found it can really be helpful with type. Rick, can you please expand on this? I'm not sure what this is or how to implement it. Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
>> A more stable fix is using a small negative margin-right (something >> like -.1em). But again, this is dependent on platform, browser and >> font-metrics. Thanks you guys for all the input. Yes it seems to be the font metrics as when I resized the text in the test div it the same spacing issue appeared. I decided to use a negative margin in percentages though and that seems to work, at least in Chrome. Have not done full testing across browsers yet. > I would recommend to redo the SVG as an image since the can be scaled as a > percentage width of the header and would look much more graceful as you > re-sized the view-port. The only problem is it also fails in IE12. Will have to experiment with this later ... thanks for the demos and if you can leave them up for awhile would greatly appreciate it. > Just curious if text-rendering:optimizeLegibility might help. I've found it > can really be helpful with type. Rick, can you please expand on this? I'm not sure what this is or how to implement it. Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On 4/07/2014 10:07 AM, Philippe Wittenbergh wrote: Le 4 juil. 2014 à 06:09, David Hucklesby a écrit : I think you may be looking at the normal letter spacing that occurs between letters. If you increase the font-size of your test text, you will notice small gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. As this spacing varies by letter and font, I’m sorry I have no good solution. Playing with the CSS letter-spacing value did not give a useful result. YMMV. letter-spacing: -.05em works here for the bottom span, at the price of pulling each of the 3 letters closer to each other. But that “fix” might be browser and platform dependent, and is dependent on the font & font-size as well. A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. I agree with Philippe, it's the font metrics. A possible solution is to simplify. Why use three ems (this causes it to be italic) and other elements to achieve something which can be simply done with a SVG. Below is a demo with an inline which looks fine in Firefox and Chrome. Fails in IE12. http://css-class.com/test/temp/elli-code.htm I would recommend to redo the SVG as an image since the can be scaled as a percentage width of the header and would look much more graceful as you re-sized the view-port. The only problem is it also fails in IE12. http://css-class.com/test/temp/elli.htm http://css-class.com/test/temp/elli.svg FYI, the "E7FLUX" could also be done as a SVG. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
Just curious if text-rendering:optimizeLegibility might help. I've found it can really be helpful with type. Rick Gordon On 7/3/14 5:07 PM, "Philippe Wittenbergh" wrote: Le 4 juil. 2014 à 06:09, David Hucklesby a écrit : I think you may be looking at the normal letter spacing that occurs between letters. If you increase the font-size of your test text, you will notice small gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
Le 4 juil. 2014 à 06:09, David Hucklesby a écrit : > I think you may be looking at the normal letter spacing that occurs between > letters. If you increase the font-size of your test text, you will notice > small > gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. > As this spacing varies by letter and font, I’m sorry I have no good solution. > Playing with the CSS letter-spacing value did not give a useful result. YMMV. letter-spacing: -.05em works here for the bottom span, at the price of pulling each of the 3 letters closer to each other. But that “fix” might be browser and platform dependent, and is dependent on the font & font-size as well. A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. Le 4 juil. 2014 à 01:40, Elli Vizcaino a écrit : > [snip] > It's just frustrating though > when you see that the behavior can be controlled with a floated div. > Though in this case it would be invalid markup to place it inside of a > header tag. Nope, nothing to do with div vs span vs em vs whatever. You’d have the exact same problem with a div. As noted above, it is the metrics of the given font. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On 7/3/14, 9:36, Alan Gresley wrote:
On 4/07/2014 1:58 AM, Elli Vizcaino wrote:
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
[code removed]
You have a missing tag.
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
Hello Elli,
I believe I know what is happening but I don't know what style is causing it.
Please see this screenshot.
http://css-class.com/test/temp/italic.jpg
It's this font-family.
h1, h1 a.logo {
font-family: "Calluna Sans","Arial","Helvetica","sans-serif";
}
To get that 'Arial italic' fallback when I remove the reset CSS.
http://www.e7flux.com/e7flux2014/css/reset.css
I don't understand why the fallback is Arial italic instead of Arial but I
suspect the italic aspect is the thing that causing the space.
I think you may be looking at the normal letter spacing that occurs between
letters. If you increase the font-size of your test text, you will notice small
gaps there as well.
As this spacing varies by letter and font, I’m sorry I have no good solution.
Playing with the CSS letter-spacing value did not give a useful result. YMMV.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On Thu, Jul 3, 2014 at 12:08 PM, Peter H. wrote: >> El 03/07/2014, a las 17:58, Elli Vizcaino escribió: >> >> I want to be able to control this >> and get the alignment even. >> >> http://www.e7flux.com/e7flux2014/.html >> >> Elli Vizcaino > > that gap between the letters and the right-hand edge is just the inherent > kerning of the font. Why don't you experiment with a slight negative > margin-right on the SPON element? It should work OK, even with different > screen widths. > > Peter H. I will give the suggestion a try. I too, was suspicious that the inherent kerning is what's causing it. It's just frustrating though when you see that the behavior can be controlled with a floated div. Though in this case it would be invalid markup to place it inside of a header tag. Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On 4/07/2014 1:58 AM, Elli Vizcaino wrote:
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing tag.
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
http://www.e7flux.com
Hello Elli,
I believe I know what is happening but I don't know what style is
causing it. Please see this screenshot.
http://css-class.com/test/temp/italic.jpg
It's this font-family.
h1, h1 a.logo {
font-family: "Calluna Sans","Arial","Helvetica","sans-serif";
}
To get that 'Arial italic' fallback when I remove the reset CSS.
http://www.e7flux.com/e7flux2014/css/reset.css
I don't understand why the fallback is Arial italic instead of Arial but
I suspect the italic aspect is the thing that causing the space.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley wrote:
> On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
>>
>> Hello CSS Discuss,
>>
>> I'm presently working on building out a responsive redesign of my site
>> and in order to keep the HTML semantic, I can't use divs inside of my
>> H1. I have an H1 tag with nested spans and ems that are floated.
>> However, the spans and ems don't behave like divs do when
>> floated--shrink wrapping to the contained content. I would love to be
>> able to replicate this same shrink wrap effect on the ems so I have
>> better control of their placement and alignment with the other text
>> elements on the page. The ems and spans seem to have inherent padding
>> I can not control. Hoping someone has some suggestions on a way to do
>> what I'd like or can suggest appropriate markup that will behave like
>> I want it to.
>>
>> Please take a look at the
>>
>> RE
>> SPON
>> SIVE
>>
>> text on the following page: http://www.e7flux.com/e7flux2014/.html
>>
>> Regards,
>>
>> Elli Vizcaino
>> http://www.e7flux.com
>
>
> Hello Elli. The padding is really line-height.
>
> Insert the following into your CSS or something like it (the border is to
> help you see).
>
> em {border: 1px solid red; line-height: 0.8; }
> em+em {border: 1px solid red; line-height: 0.9; }
> em+em+em { line-height: 1; }
>
>
> And remove or alter the margins below where I have inserted REMOVE or ALTER.
> I commented them out before using the above CSS.
>
> .re {
> display: block;
> /* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
> text-align: right;
> font-size: 32.25em; /* 516px/16px */
> letter-spacing: -17px;
> }
> .vamp, .ing {
> clear: both;
> display: block;
> text-align: right;
> }
> .vamp {
> font-size: 12.75em; /* 204px/16px */
> /* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
> /* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
> }
> .ing {
> font-size: 9em; /* 144px/16px */
> margin-bottom: 11.05072463768116%; /* 61px/552px */
>
> }
>
> You have a missing tag.
>
>
>
> Alan
>
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
http://www.e7flux.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Regards,
Elli Vizcaino
http://www.e7flux.com
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is
to help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or
ALTER. I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing tag.
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
