Reputation: 854
I have chordpro.php generated html site; the following part is pertaining to this question:
<div class="song">
<table border=0 cellpadding=0 cellspacing=0 class="songline">
<tr class="songlyricchord"><td></td><td> C </td><td> C7 </td></tr>
<tr class="songlyricline"><td>1. </td><td>Moje malé svetielko, chcem, aby svietilo. (</td> <td>hey hey hey)</td></tr></table>
</div>
The stylesheet is the following:
/* chordpro CSS for the PmWiki Chordpro recipe heavily modified by Otto Bolyós
See http://pmwiki.org/wiki/Cookbook/ChordPro
Copyright 2006, 2007, 2008, 2009 Simon Davis
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, Version 2, as
published by the Free Software Foundation.
http://www.gnu.org/copyleft/gpl.html
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
v0.3 2009-10-01 add songversion, songnewpage, page-break, line spacing
v0.2 2009-08-20 significant changes to make work properly
v0.1 2008-05-26 spacing between refrains
v0.0 2006-12-27 to go with Chordpro recipe version 0.1
*/
body {
background-color:#fff;
margin-top:0px;
margin-left: 10pt;
margin-right: 10pt;
}
@font-face {
font-family: "Linux Libertine Display G";
src: url("fnts/linlibdg.woff") format('woff');
}
@font-face {
font-family: "Linux Libertine G";
src: local('Linux Libertine G'), url("fnts/linlibg_r.woff") format('woff');
font-style: normal;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_z.woff") format('woff');
font-weight: 600
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_b.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_zi.woff") format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_bi.woff") format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_r.woff") format('woff');
font-style: italic;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_bi.woff") format('woff');
font-style: italic;
font-weight: bold;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_b.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_ri.woff") format('woff');
font-style: italic;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_r.woff") format('woff');
}
.nav a:hover, .logotext a:hover {
/* color: #316676;*/
text-decoration: none;
text-shadow: 0 0 20px #f3f3f3;
color: #aaf;
/* text-shadow: none;*/
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
outline: 0 none;
}
a:hover {
text-decoration:underline;
}
a:link {
text-decoration: none;
color:#2795B6;
}
a:visited {
text-decoration: none;
color:#2795B6;
}
a:active {
text-decoration: none;
}
/* menu */
.menu {
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
background:#000;
color:#fff;
font-family: "Linux Libertine G";
font-size: 14pt;
}
.logo {
float:left;
}
.logotext, .logotext a:link {
text-decoration: none;
color: #fff; /* keep the color */
margin-top: 0px;
padding-top: 0px;
}
.nav {
float:right;
margin-right:10px;
}
.nav ul li {
list-style:none;
float:left;
padding-top: 0px;
margin-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.logo ul li {
list-style:none;
float:left;
padding-top: 0px;
margin-top: 0px;
padding-left: 0px;
padding-right: 10px;
}
.title h1 { /* h1 */
font-size: 25pt;
text-align: center;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp", "smcp";
text-decoration: underline;
padding-bottom: 15px;
padding-top: 0px;
margin-top: 0px;
}
.espievatko {
font-family: "Linux Libertine G", serif;
text-align: center;
font-size: 70pt;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp", "smcp";
margin-top:20px;
margin-bottom:28px;
}
.e {
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: #FF0000;
}
p {
font-size: 14pt;
text-align: justify;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
}
.basic {
font-size: 14pt;
text-align: justify;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
}
.small {
font-size: 10pt;
font-style: italic; /* this one does not work, donno why */
}
.mono, ::-moz-placeholder, ::-o-placeholder, ::-webkit-placeholder, ::placeholder {
font-family: "Ubuntu Mono";
font-size: 11pt;
}
.col2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
column-gap:40px;
-moz-column-gap:60px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
}
.break {
-webkit-page-break-after: column;
-moz-page-break-after: column;
-o-page-break-after: column;
-ms-page-break-after: column;
page-break-after: column;
}
.texty {
width: 100%;
min-height: 180px;
max-height: 400px;
resize: vertical;
}
.search {
-moz-border-radius:5px;
width: 97%;
}
.cislo {
width: 40pt;
}
.white {
color: #fff !important;
}
.italic {
font-style: italic !important;
}
td {
/* padding-right: 2px;*/
/* cell-padding-right: 4px*/
border-spacing: 10px;
border-collapse: separate;
}
.terminal {
font-family: "Ubuntu Mono"
/* background-color: #999999 */
}
.th {
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
text-align: left;
}
.songtitle { /* h2 */
font-size: 16pt;
text-align: left;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp", "smcp";
text-decoration: underline;
line-height:90%
}
.songsubtitle { /* h3 */
font-family: "Ubuntu Mono", serif;
font-style: italic;
font-size: 10pt;
line-height:0%;
text-indent: 50px;
}
.songalbum { /* div */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
page-break-inside: avoid;
}
.song { /* div around entire markup*/
background-color: White;
}
.songchorus { /* div, to highlight chorus */
/* padding-left: 1.5em; */ /* indent chorus */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
page-break-inside: avoid;
}
.songtab { /* div, for tablature */
font-family: monospace;
font-size: 90%;
line-height: 90%;
white-space: pre;
page-break-inside: avoid;
}
.songline {
/* table, a chord and a lyrics line */
empty-cells: show;
margin: 0em;
padding: 0em;
padding-top: 0.1em;
padding-bottom: .1em;
page-break-inside: avoid;
}
.songlyricchord, /* tr, chord line (above) */
.songlyricline { /* tr, lyric line (below) */
margin: 0em;
padding: 0em;
page-break-inside: avoid;
}
.songlyricchord td /* line element containing one chord */ {
padding-top: 0.1em;
}
.songlyricline td { /* line element containing lyrics for one chord */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
background-color: white;
margin: 0em;
padding: 0em;
white-space: pre;
font-size: 16pt;
line-height: 90%;
}
.songlyricchord td { /* specific chord formatting */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
font-weight: 600;
font-size: 12pt;
}
.songlyricline td { /* specific lyrics formatting */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
font-size: 12pt;
}
.songcomment { /* div around comments of all types*/
color: black;
font-family: "Ubuntu Mono";
font-style: italic;
font-size: 10pt;
page-break-inside: avoid;
}
.songcommentsimple, .songcommentitalic, .songcommentbox { /* for span around comments of all types*/
background-color: white;
}
.songcommentsimple { /* span specific comment formatting */
}
.songcommentitalic { /* span specific comment formatting */
font-style: italic;
}
.songcommentbox { /* span specific comment formatting */
border: 1px solid black;
padding-left: 0.2em;
padding-right: 0.2em;
}
.songdebug { /* span, for debug output */
font-size: x-small;
color: Red;
}
.songmessage { /* span, eg unknown directive */
font-weight: bolder;
font-size: smaller;
color: black;
}
.songversion { /* span, for version display */
font-size: smaller;
color: black;
}
.songnewpage { /* div, some browsers may action this formatting */
page-break-after: always; /* ask browser to start a new page */
clear: both; /* clear content before page break */
}
/* end of chordpro.css */
What I want to do is that in the html example the cell <td>hey hey hey)</td>
should be italicized.
So far I tried <td class="italic"></td>
, <i></i>
, <div class="italic"><td></td></div>
, <td style="font-style: italic !important;>
. I had similar problem with the class="white"
, the important!
solved the issue then. Now it does not work for class="italic"
.
Update:
Here is a link to html, css and all files in use.
Upvotes: 0
Views: 5001
Reputation: 977
Either set some class to td
like class="italic"
, then you can use:
.songlyricline td.italic {
font-style: italic;
}
Or without class, if it's always on the end of the row:
.songlyricline td:last-child {
font-style: italic;
}
Also, make sure that the font you are using has a italic variant. Try using some basic font-family and check if it works. If yes, then find different font to use on your site
Update 1:
You have several @font-face
with same font-family
name... Just set new name to your italic font:
@font-face {
font-family: "kurziva";
src: url("fnts/linlibg_i.woff") format('woff');
font-style: italic;
}
and then apply this new font-family
to elements you want to have in italic version:
.songlyricline td i {
font-family: kurziva;
}
This works on your files. Try that ;)
Upvotes: 1
Reputation: 201866
If you want (true) italic, you need to specify an italic typeface. Your @font-face
rules now refer to normal (regular) typefaces only.
Upvotes: 1