The CSS property text-transform and the pseudo-element ::first-line have been part of CSS spec for a long time, but for some reason unknown to humanity, Webkit browsers still don't allow these to be combined. The combination works seamlessly and as expected in Firefox and "modern versions of IE" (which used to be an oxymoron).
Is there a workaround for this? (ideally without utilizing javascript)
I would like to use CSS to style the first line of a paragraph to be in all caps, and it should work in Chrome as well as Firefox.
You can get close by using font-variant: small-caps;, if you modify the font size of the first line and first letter (assuming the first letter is the only one capitalized):
div {
font: 16px verdana;
}
div::first-line {
font-variant: small-caps;
font-size: 150%;
}
div::first-letter {
font-size: 70%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
OK, using Rick Hitchcock's answer, I have a CSS work-around for this. By combining font-variant: small-caps and increasing the font size, you can get webkit browsers to deliver this basic look. small-caps isn't a good-looking typography for some fonts, and your mileage may vary. I'm wrapping my CSS in a webkit-specific media-query so that the simpler text-transform will take effect on non-webkit browsers.
This code is working for me:
p.opener::first-line {
text-transform: uppercase;
}
...
/* Fix Webkit ::first-line issues */
#media screen and (-webkit-min-device-pixel-ratio:0) {
p.opener::first-line {
font-size:24px;
font-variant: small-caps;
}
p.opener::first-letter {
font-size:19px;
}
}
Related
Hi I am trying to format my web paragraphs so that the text is justified and the last line is centered. I found the CSS property "text-align-last" which allows me to specify the alignment for the last line.
The problem is that this property is not supported by Chrome and Safari (yet...?).
Anyone have an alternative or a trick to do that?
The W3C manual: http://www.w3schools.com/cssref/css3_pr_text-align-last.asp
Thanks
I don't think it's possible in CSS alone.
Here's a JavaScript solution, in which a clone lies behind the element. The element has text-align: justify and the clone has text-align: center.
The code then reduces the height of the original element so that only the clone's last line displays.
var p= document.getElementById('lorem'),
clone= document.createElement('p');
clone.textContent= p.textContent;
clone.className= 'clone';
p.parentNode.insertBefore(clone, p);
p.style.height= p.offsetHeight - 14 + 'px';
#lorem, .clone {
position: absolute;
line-height: 14px;
font: 14px arial;
width: 500px;
}
#lorem {
text-align: justify;
overflow: hidden;
background: white;
}
.clone {
text-align: center;
}
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
The CSS property text-transform and the pseudo-element ::first-line have been part of CSS spec for a long time, but for some reason unknown to humanity, Webkit browsers still don't allow these to be combined. The combination works seamlessly and as expected in Firefox and "modern versions of IE" (which used to be an oxymoron).
Is there a workaround for this? (ideally without utilizing javascript)
I would like to use CSS to style the first line of a paragraph to be in all caps, and it should work in Chrome as well as Firefox.
You can get close by using font-variant: small-caps;, if you modify the font size of the first line and first letter (assuming the first letter is the only one capitalized):
div {
font: 16px verdana;
}
div::first-line {
font-variant: small-caps;
font-size: 150%;
}
div::first-letter {
font-size: 70%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
OK, using Rick Hitchcock's answer, I have a CSS work-around for this. By combining font-variant: small-caps and increasing the font size, you can get webkit browsers to deliver this basic look. small-caps isn't a good-looking typography for some fonts, and your mileage may vary. I'm wrapping my CSS in a webkit-specific media-query so that the simpler text-transform will take effect on non-webkit browsers.
This code is working for me:
p.opener::first-line {
text-transform: uppercase;
}
...
/* Fix Webkit ::first-line issues */
#media screen and (-webkit-min-device-pixel-ratio:0) {
p.opener::first-line {
font-size:24px;
font-variant: small-caps;
}
p.opener::first-letter {
font-size:19px;
}
}
Ignore whether or not this actually looks good.
I'm looking for the best way to align the top of text with an adjacent block element with a background or image in it. With the test-case snippet below, what I'm trying to [elegantly] get rid of is the red gap:
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
<div class="col bg"></div>
<div class="col">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
This is essentially coming from the line-height. Setting line-height to 1 solves the problem but then borks any multi-line text which I need to support. Even applying the line-height change just to the :first-line results in bad spacing on multi-line text. Right now, the best I can think of is trying to come up with some magic-number negative em margin-top value to apply to headings, paragraphs, etc., but I'm wondering if there's a better way.
The h1 itself is aligned to the simbling element, but the text inside it is not.
To verticaly align the text into a h1 tag you need to set the line height.
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
.col h1 {
line-height: 21px;
}
.col h1 span {
vertical-align:super;
}
div{
padding:0;
}
<div class="col bg"></div>
<div class="col">
<h1><span>Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
EDIT:
to use it in a multi-line: put your text into a span with a vertical-align:super; The line-height property on h1 will control the space between lines.
The other answer provided right now does work but I really wanted to avoid the extra markup required to make it work. Unfortunately that led me to a magic number solution. I'm not sure there's a good solution right now that's pure-CSS. I played with the :first-line pseudo selector but to ill effect.
What I ended up with was just using a negative margin-top on the <h1> element. I think the value of of the margin more or less works out to:
-(({line-height} - 1 ) / 2)em
That assumes you're using unitless line-height values.
Hi
I want to use custom arabic font in UIWebView, I read that iOS 4.2 onwards we can use TTF webfonts.
I have arabic font in my resources and following is the code I am using:
<html>
<head>
<title>#font-face Demo</title>
<style type="text/css">
#font-face {
font-family: 'me_quran Regular';
src: local('me_quran Regular'),
local('me_quran'),
url('me_quran.ttf') format('truetype');
}
h1, p {
font-family: 'me_quran Regular';
}
h1 {
font-size: 45px;
}
p {
font-size: 18px;
line-height: 27px;
}
#container{
width: 800px;
margin: 0 auto 0 auto;
}
}
</style>
</head>
<body>
<div id="container">
<h1>بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
The problem is: I am getting the arabic text in UIWebView but its not the one I loaded, its the default arabic font iOS uses.
Help me out!
Note: I have tested many English TTF, they all are working fine with iOS 4.2.1.
Hi
I finally figured it out. You can load almost all (.ttf) fonts, either arabic, english or whatever on iOS 3.2 above. You just need to use the correct text (in terms of unicode), to display it.
Given a block container
<div>
this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>
are there any css properties I can set to force it to break when it reaches the container width, regardless of the contents of the string, for example a break like:
this is a ve
ry long stri
ng which ...
is pretty much what I want. Right now, it seems to always prefer to break at whitespace characters or other special characters (such as /).
There's a CSS3 property called word-break that may be of some use to you in future.
More information is available here: http://www.css3.com/css-word-break/
The break-all value looks to do the thing you're asking for:
Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.
As for more supported versions of CSS, I don't believe there's a way you can do this.
Try this
<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>
Alternative way achieve the same by enclosing the div in a parent div and setting the width of the parent div. Though it might not be the ideal solution.
<div style="width:50px">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>