CSS/HTML: What Is The Correct Way to Make Text Italic

CSS/HTML: What is the correct way to make text italic?

You should use different methods for different use cases:

1. If you want to emphasise a phrase, use <em>.
2. The <i> tag has a new meaning in HTML5, representing "a span of text in an alternate voice or mood". So you should use this tag for things like thoughts/asides or idiomatic phrases. The spec also suggests ship names (but no longer suggests book/song/movie names; use <cite> for that instead).
3. If the italicised text is part of a larger context, say an introductory paragraph, you should attach the CSS style to the larger element, i.e. p.intro { font-style: italic; }

How to combine bold and italic in CSS?

You were close.

italic is used with font-style whereas bold is used with font-weight.

Use:

font-weight: bold;
font-style: italic;

Making text in one column italics with CSS

What you can do is using the td:nth-child() to make Row 1/2/3 Right italic:

td:nth-child(2) {
    font-style: italic;
}

In a HTML form, should an italicized (required) get <i>, <em> or <span class=italic>?

Arguably, neither <em> nor <i> is semantically correct. Your question already presumes that you want the text to visually be italic, not that you want it to be emphasized nor recognized as foreign text, the name of a ship, and so on.

That being said, a neutral element is likely your best bet, such as <span>, to avoid imparting semantic meaning where this none. Also, a screen reader will not announce the text any differently if you use<em> or <i>.

You can take it another step and skip adding an element altogether and use CSS to add the content for you (provided you support only one language and/or have an easy way to do CSS per language):

input[required] + label::after,
textarea[required] + label::after {
  content: " (required)"
}

Or the inverse:

input:not([required]) + label::after,
textarea:not([required]) + label::after {
  content: " (optional)"
}

Screen readers announce CSS generated content, in case you are worried that might be an issue.

Is it possible to have a custom italic css property that is less slanted?

You can try with CSS3 skew() property like this :

See this fiddle

h1
{ 
text-transform: uppercase; 
font-family: arial; 
transform: skew(-13deg);
-webkit-transform: skew(-13deg);
}

html italic letters protrude from their container (and may be cut by the next container' background)

The document cited correctly describes that letters may extend past the borders of their container box, especially in italic typefaces. This is a matter of typography, so it is not specified in HTML or CSS specifications, though some CSS material might refer to it. The container box is just a typographer’s playground, and he may decide to cross the borders at times. The height of the container box is the font size, its width is the advance width of the glyph, and these quantities are used by programs when they lay out text; they do not restrict the glyphs.

This is even more so when fake italic (synthetic italic, algorithmically slanted text) is used, and this happens when you use Impact and ask for italic. There is no italic typeface for it, i.e. italic forms of glyphs designed by a typographer, so a browsers needs to ignore your request or to produce fake italic. Since the shapes of letters do not change, except via the slanting, the slanting angle must be fairly large to make “italic” look different from normal. And the amount of slanting makes it more probable to cross the right border of the container box.

In classic typography, such issues can be addressed by adding some spacing when needed. This is difficult to automate and hence mostly not done these days. In CSS, you could use padding-right, but you naturally need to wrap a word or a letter in an element (normally span) so that you have something to apply the styling to, e.g.

 <span style="padding-right: 0.08em">World</span>

or

 <i style="padding-right: 0.08em">World</i>

This is cumbersome, of course, especially since the amount of spacing needs to depend on the last letter (and on the font and maybe on the first letter of the next word). Alternatively, you could use fixed-width spaces, such as  , which corresponds to the methods used in lead typography (a narrow piece of metal was placed after printing letters), but this is not flexible and not reliable (the widths of those characters actually vary by font).

css to force italics for certain characters only within a tag?

CSS is meant to style the structure of the page not the content of the page directly.

This being said, there are a couple of ways around it (obviously):

1. Wrap the characters you want to italicize in <i>,<span>,<em>,<dfn>,<var>,<cite>
2. Use javascript to search through all of you text and wrap any of these elements around that text
3. use the server side code to split you text into an array and format the text with the tags on the server side so when the content makes it to the page it is already formatted.

There is no way to pick specific characters using CSS.

---

Related Topics