Help with Bold/Italic CSS in EPUB export

I generate EPUB files from the print version of my InDesign books. Because I want the best possible experience for readers on various devices, I always take time to clean up and optimize the XHTML and images, since I do understand that reflowable eBooks may not look exactly like their print-page counterparts. Plus, paring things down to basic HTML tags like div, p, em, and strong helps me prep the content for multiple targets, including Kindle or web page, and also helps ensure accessibility by allowing the user's device to handle em and strong instead of forcing those blocks to be italic or bold.
When InDesign exports text formatted as italic and bold, however, I don't get simple tags like <em>...</em> and <strong>...</strong>, I get <span class="CharOverride-1">...</span> and <span class="CharOverride-2">...</span>.
It's always worked like that, which is fine—but in previous versions it was no big deal to replace all <span class="CharOverride-N">...</span> with <em>...</em> (or <strong>...</strong>). Since there was one idGeneratedStyles.css for the whole book, I could rely on the fact that N would always be the same style within a book (even if it varied from one book to another).
Now, with the supposed "more control over CSS," I find that there's a local CSS file generated for every document in the book! In one document, <span class="CharOverride-1">...</span> is bold, in another the same class means italic. This change has turned a 30 second process into 60 minutes, since I have to check each document one at a time to do the correct replacement.
Is there an option I'm missing? Is this a new feature-bug?
Am I an edge case?
[Edit: Simplified Title]

I did try replacing all italic text in the 30 documents or so with a new character style called "Italic;" I set the Export Tagging option for the style to em but the output I got was <span class="Italic">...</span>
That's still closer to what I need, since it's consistent, but definitely not what I was hoping for! I'm also not sure I want to remember to use the new "Italic" style instead of the near-instinctive keyboard shortcut for make this selection italic.

Similar Messages

Major metadata Problem with new Pages(v4.3) epub export

Iam are very disappointed with new Pages update (4.3). After new Pages update, when i want to export a book into epub, and upload book in iBookstore iTunes Producer cancels it, because of ERROR: /OPS/cover.xhtml(5,458): element "div" not allowed here; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg"). Previously i did not have any problems with uploading the epubs produced in Pages (4.2). I checked our epubs using epubchecker and i think, that new Pages (4.3) makes incorrect HTML elements in epubs, which i want to export.
Please, send me some feedback and Apple - fix this problem.!

VikingOSX wrote:
Have you tried creating your content in Pages v4.3 and transferring it into iBooks Author 2.0. Let the latter export your epub, which may be a newer epub standard than what Pages may incorporate. See if this epub satisfies the iBookstore iTunes Producer file requirements.
iBooks Author can't produce .epub, only a special .ibooks format that can't be read on any device other than an iPad. But should certainly satisfy the ibookstore.

Help with Sub-catalog CSS not rendering properly

I am having a issue with deep Sub-catalogs not displaying an external style sheet, possibly being overwritten by modulestylesheet?
Sorry if it looks a little sloppy, the site is still a work in progress...
If you look here at this main catalog : http://www.4plotters.com/shop/ --------- >the css is being applied properly,
the next level down here : http://www.4plotters.com/shop/Toner-Ink --------------> css also applied properly.
but... when you go one more level deep here : http://www.4plotters.com/shop/Toner-Ink/ink-wide-format -----> css is not being applied from my external css (much of its functionality is to overwrite the modulestyle sheet) Notice the link colors change to blue, and the catalog images and headers don't match the catalogs before it.
I have some other external twitter bootstrap css files that are still being applied, so I am a little confused. I am fairly new to css and html (and self taught) so I might be just missing some fundamental precedence rules.
Thanks in advance!
*Edit* When I change the parent catalog to the top level "Shop" catalog, the css is once again applied properly. It is something about being 2 or 3 levels deep that breaks the css link.

Hi,
Go into your template and remove the ".." prior to the CSS reference to help correct this issue.
Before:
After:
Hope this helps!
-Sidney

Help with Bold Attribute

I use the following code:
     MutableAttributeSet BOLD = new SimpleAttributeSet();
StyleConstants.setBold(BOLD, true);
Then, I dump the key, object pair in the AttributeSet by the following piece of code:
     private void dumpAttributeSet(AttributeSet set) {
          Enumeration en = set.getAttributeNames();
          while (en.hasMoreElements()) {
               Object name = en.nextElement();
               Object value = set.getAttribute(name);
               System.out.println("att=["+name+","+value+"]");
I found it is [bold,true]
However, when I use test with the following code:
     JTextPane text=new JTextPane();
     text.setContentType("text/html");
text.setText("<b>Hello</b>);
HTMLDocument doc= (HTMLDocument)text.getDocument();
Element e = doc.getDefaultRootElement().getElement()...getElement();
AttributeSet set = e.getAttributes();
I found it is [font-weight,bold]!!!!!!!!!!!!!!!!
Why are they different for both are bold?
Can I translate one AttributeSet into another?
Pls help!

Any small hints or idea will be very much appreciated! pls help!

Help with cropping & sorting images prior to export for print

I have large project (wedding) within which I've sorted images into several folders (pre-wedding, church, family portraits, etc.) within which there are smart albums based on my ratings. I also have a generic "5 Star" album at the top level which contains the final images that have been adjusted and which the client has been provided with in order to choose from.
I now have a list of print requirements from the client (image name, size, and quantity).
I'm curious to know what the quickest way to sort and tag the images selected for print, particularly in view of there being a number of different size requests for the images which are to be printed.
Also - I'd value opinions (based on experience) on whether I should bother cropping to size for images that are 5x7 and 8x10 (the default ratio is 2x3 at the moment).
The bottom line is that I'm trying to minimise the amount of time I spend on print tagging and cropping prior to export, and post export sorting prior to sending off to the lab.
Thanks,
Paul

To answer your questions:
I am assuming that you want a new version of the crop size especially if you have an image/s that are required in multiple sizes like 8x10 and 5x7 the image would end up in each crop size album so you would have two versions one for each aspect ratio and doing the new version in the context of the album would make in the album pic so that the proper one will be at the top of the stack in each respective album.
Orientation does not matter with the stamp it will work fine - if you have an issue let me know.
with respect to the stamp - the stamp will position the crop relative to the one you lifted - if your lifted crop is in the middle then so will the stamped ones.
As for adjustment of the crop - just click on the crop tool, the click on the browser image and arrow through the images with the crop tool open - you can drag the crop around for each one with a minimum of keystrokes.
Try it and hit me back with issues. I do this all the time and it is about 3000x quicker than my old workflow 5 years ago. For that matter the power of albums, stacks, and stack picks for this kind of thing is fabulous, there are a million ways to use it to speed things up. Bonus is that you are not copying anything so it is virtually free from a resource perspective.
Last but not least I would think twice before using a smart album to do this, youi really do not want the content changing in this type of album, it will not save you any time, I would use static albums in the manner that I suggested.
RB
Ps. If you are interested in the ins and outs of Aperture organization features check out my PDF on the subject there is a bunch of stuff like this.

Help with PHP and CSS links (&mysql results)

Hi
Hope someone can help. I have a column in a mysql5 database that records if an advert is 'featured' or not with 'yes' or 'no' in the database fields.
I'm dynamically creating a list of adverts using php5 and DWCS3 where each ad comprises several table rows and these are wrapped up in a repeat region (rather than one table row per ad title) and I'd like to highlight the background of the 'featured' advert using link to a style class eg so that the 'featured' ads have a different background colour to the rest of the ads listed.
I've got the following code so far, which highlights the adverts but it does this for all of them (featured and non-featured).
The 'advertpagetabletext' class is the standard (default) rule applied to non-featured adverts. The "advertfeatured" class is the new background colour.
Can anyone point me in the right direction / comment on the code below?
Thanks in advance,
M
<?php $featured = $row_listJobs(['job_featured']; ?>
<?php do { ?>
<table width="100%" border="0" cellpadding="3" cellspacing="0"<?php if($featured == y) {echo 'class="advertfeatured"'; } else {echo 'class="advertpagetabletext"'; } ?>>
<tr>
<td ....rest of table and rows etc etc...

Ahh, penny drops,
From what I can see the class is coming through as "advertfeatured" on all of the ads - so it seems to be ignoring the fact that some are not featured / and doesn't revert to the other class for the second ad listing.
//This is for a featured advert //
Job Title: Viticulturalist
etc etc //This is for a nonfeatured advert//
Job Title: Cellar Hand
Job Category: �i�o
<tr

Help with Bold 9000

Hi,
I have got a Bold 9000 and it only has English installed. I would like to find a way of putting Spanish as a keyboard option, the only problem I have is I use a MAC and I can't seem to find out how to add it.
I would be grateful for any advice
Regards
Galiceltico

Hey galiceltico,
Welcome to the BlackBerry Support Community Forums.
You can install different input languages by following this KB article: http://t.co/8GqdvXl
-ViciousFerret
Come follow your BlackBerry Technical Team on Twitter! @BlackBerryHelp
Be sure to click Like! for those who have helped you.
Click Accept as Solution for posts that have solved your issue(s)!

Help with spry menu css

Very new to this, so...in an effort to code a page using a spry menu bar for a mobile device, I made the following edits: 1) renamed MenuBarHorizontal to MenuBarMyCompany 2) renamed MenuBarVertical to MenuBarMyCompany 3) moved the SpryMenuBarHorizontal.css code to MyCompanyStyle.css 4) moved the SpryMenuBarVertical.css code to mobile.css. These changes are displayed exactly as I’d hoped in Dreamweaver CS5.5 Live View; however, the menu bar styling is does not display at all in Safari or Firefox browsers. Any advice? Thanks so much.

When I reviewed the source, I realized I hadn't removed one of the style links. I am so sorry to have posted this question.

Need help with mobily slider CSS

Hi there, I have found a really nice slider which you can see a demo here:
http://playground.mobily.pl/jquery/mobily-slider/demo.html
Basically, I am trying to get the bullets currently underneath the images to sit on top of the image, but whatever I try, I am not achieving what I want. I was wondering if you could give me some advice on where I on how to make it happen... please!
I can get one bullet to move up and sit on top, but then I loose all but the one bullet.
Here is the CSS:
#content {
width:900px;
.slider {
float:left;
width:900px;
height:305px;
position:relative;
padding-bottom:26px;
.sliderContent {
float:left;
width:900px;
height:305px;
clear:both;
position:relative;
overflow:hidden;
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(../gfx/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
.prev {
background-position:0 0;
left:15px;
.prev:hover {
background-position:0 -44px;
.next {
right:15px;
background-position:-44px 0;
.next:hover {
background-position:-44px -44px;
.sliderContent .item {
position:absolute;
width:900px;
height:305px;
background:#fff;
z-index:10;
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(../gfx/bullets.png) no-repeat;
.sliderBullets .active {
background-position:0 -13px;
.sliderContent a {
outline:none;
a {
color:#fff;
a img {
border:none;
Any guidance you could give is going to be appreciated.
Thanks in advance
Mat

Add padding: 20px 0 0 0; to the css selector below, as shown.
.sliderContent {
padding: 20px 0 0 0;
float:left;
width:800px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
Amend bottom: 0; to top: 0; on the css selector below, as shown:
.sliderBullets {
position:absolute;
top:0;
left:50%;
z-index:50;
margin-left:-45px;
That's it, Job done.

Need help with Italics for ePub and InDesign CS5

Could someone help a me out. I just can not find the answer to this and I know it should be simple, I am just missing it.
I am creating an ePub from CS5 InDesign. All I want to do is have the italics that are shown in the text box in InDesign, show up in the epub file.
I would prefer not to say what I have done (I think I have tried everything, but obviously I did them all wrong, so no point listing them) and I am hoping someone can do a simple, step by step guide to how to have italics show up in the ePub file.
Sorry if this question is beneath everyone, this is really annoying that I can not figure this out on my own.

Yup, done this.
In InDesign, the text is Italic. It has the Character Style Italic associated with it.
But when I export to ePub, it is not italic.
Here is the HTML from the xhtml file for a single line of what is supposed to be italic text,
<p class="normal normal-override-2" xml:lang='en-us'><span class="italic italic-override">Words that should be Italic.</span></p>
The above line does not show up as italic in any of the 3 readers I am using to test with.
Now, in the css sheet, the span.italic-override does not have anything associated to font-style. If I manually add the font-style italic, then re-pack everything, it works.
It just seems to me a bit absurd to have to export the epub, unpack it, open it in dreamweaver, add the font-style, and repack it just to have something as simple as italic work.
So, I am missing something, I get that... I just can't figure out what!

Help with dynamic text and and css !

My second question of the day.
I'm trying to build a feature in my app in which the user can
hide/reveal
bolding and or
italics and or
underlining. The text is being loaded in from an xml file
and I was thinking about styling it with css in order to get the
underlining. My problem is that the only way I can think about
pulling this off is to have a css style sheet that has a defined
bold,italic and underline class defined- - then another one that
just has a italic and underline class defined -- then another one
that has just a bold and underline class defined . . . and so on
and so on. You can see why I would prefer a much more streamlined
system. Unfortunately my experience with dynamic text styling is
somewhat limited. Hopefully someone can help me out here.

Perfect. I knew it was some little snippet that I was
forgetting. I made a temporary fix of creating a 0% alpha box over
the button like a fake click area above the text, and that worked
but I know that it was a half-arsed way of working around it.
Thanks.

Prob with chinese font bold, italic... in PDF report

Hello everyone ! :D
My symptoms (overview) : to create my RDF report, I'm using a font, simsun.ttf, wich allow me to view chineses and french characters. Everything is ok, except in PDF format, all the items remains in "normal" style.
My configuration : Windows NT4 SP6a
Report Builder 9.0.4.2
Acrobat Reader 7.0
Oracle Database 9.2.0.6
In Detail : in report builder, every items (text fields, labels,...) are directly created with SimSun font. Some items are bold, some italic, ...
If i generate the report in RTF format, my items bold, italic, ... are ok in Microsoft Word (SimSun Bold, ...). However, if i generate the report in PDF format, everything is in "normal" style.
I changed the file UIFONT.ALI like this :
[ PDF:Subset ]
# This example shows how to subset Arial True Type font into the PDF file
# Arial = "Arial.ttf"
# The True Type font files must exist in any one of the folders specified in
# REPORTS_PATH.
SimSun..Italic.Bold.. = "SimSun.ttf"
SimSun...Bold.. = "SimSun.ttf"
SimSun..Italic... = "SimSun.ttf"
SimSun..... = "SimSun.ttf"
and also like that (just to try something else, but it does not change anything) :
[ PDF:Subset ]
# This example shows how to subset Arial True Type font into the PDF file
# Arial = "Arial.ttf"
# The True Type font files must exist in any one of the folders specified in
# REPORTS_PATH.
SimSun = "SimSun.ttf"
Obviously, with an Arial font, we can map the different files Arialb.ttf, Arialbi.ttf, ... according to the desired font style we want, but with SimSun font, there is only one file : SimSun.ttf.
Obviously, i have no choice for the font... I have to use SimSun.
Anyway, if i take a look at my PDF, the used fonts (in file>property>fonts>) i can see several personnalized fonts, each one corresponding to a SimSun style (one for SimSun, Bold, an other for SimSun, BoldItalic, ...) but everything is the same style on screen.
Does somebody have an idea??
Thanks a lot !

Hi I am also facing same Problem If you get solution to this please help me.
I have one sugestion,Inf you PDF file go to file>Document Properties>fonts
chech that if tyep is TYPE3 and font is CUSTOM then it is using subsetting ,and if not then report is using pdfs default font and it is not using required font
Hope this may solve your Problem

Problem with epub export of thumbnail

I want to use a .jpg image file as the cover in an epub export, but choosing this file in the epub export dialogue doesn't work: the exported epub file always puts a .png file of the title page in the thumbnails folder. I thought that replacing this file with a .png file of the cover would do the trick, but I still get the title page thumbnail in Digital Editions. What's the trick?

Upfront disclosure: Like Steve, I'm just getting into Epub but I've been using HTML/CSS for years in building websites so it's been a pretty easy move for me.
What I've found (through the previously mentioned Liz Castro's excellent blog) is that at least for iBooks you're better off creating the cover image at 600x860 pixels. That will avoid any scaling at all at least in using CS5.5.
Try that and let us know if it works.
Finally, I'm not sure you can have an Epub without a cover. In iBooks you'll only see it if you go to the TOC and have the tablet in landscape orientation.
Bob

EPub export issues and e-book programs that work with it

Hey Ladies and Gents,
I'm working with my coworker on ePUBS for our company products but we're pretty much noobs when it comes to these. We've hit a few snags that I'm hoping someone on here might be able to clear up.
So far we've managed to export our white papers as fixed layout but when we open them up in adobe digital editions a lot of the text content seems to overlap like below:
We don't have that problem in reflowable layout but some of our anchored points and captions get misplaced (which is almost worse). Is there anyway to fix this issue in the settings with Fixed layout without having to switched over to reflowable?
We have them layed out for ipads and iphones. They include products photos/tables along with their descriptions.We primarily would love to have them up on iBooks and amazon for free for our clients to view.
Only thing is, we haven't found a good program to download/publish our ePUBS to the correct format they need.
Currently, Apple has seven approved iBookstore aggregators we've heard of that could work:
• BiblioCore—www.bibliocore.com
• BookBaby—www.bookbaby.com
• Constellation—www.perseusdigital.com
• INgrooves—www.ingrooves.com/digital-publishing
• Ingram—www.ingramcontent.com/apple
• Lulu—www.lulu.com/apple-ipad-publishing
• Smashwords—www.smashwords.com/about/how_to_publish_ipad_ebooks
However, Lulu is expensive and doesn't bring in photos. we've seen a program that does that for $800
BUT we're hoping for a cheaper route; That's not exactly in our budget. We don't know much about the other ones. I'm hoping someone on here could give us some good insight on what would be the best choice for publishing our books onto ibooks and amazon.
Thanks,
Kristen

I don't know what was running in the background that was causing InDesign to crash when I ran the epub export but now that I've restarted the machine (Windows 7) and restarted InDesign CS 5.5 the epub export works fine. Though I'm still noticing problems with both the TOC and Cover image being exported at the same time. When that is done the TOC is not incorporated into the epub. This isn't much of a concern at the moment since I can always use some freeware to add that in. I'm also puzzled that I can't add the author information in bridge. InDesign locks the epub up so that the author, title, etc can not be edited in bridge. But once again I can always use freeware to do this. Thanks for the help you two.

Help with css please

Can some help me put my css correct please. Basicly im learning and its crap! The only good thing so far is my dropdown menu.
My wording which start Bristol equestrian services isn't even in the middle of the box, I can't write content next to my image or it goes down to the bottom of the image, and my content area which start quality..... is to the right!
http://46.20.119.224/~bristol1/index_2.html
Karen

I'm not sure where you want to go with this but try the below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://46.20.119.224/~bristol1/css/dropdown.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* global css styles */
body {
margin:0;
padding:0;
/* page specific css styles */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
h1,h2,h3,h4,h5,h6 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
#navMenu {
    width: 994px;
    margin: 0 auto;
#header {
background-image: url(http://46.20.119.224/~bristol1/images/headerimage.jpg);
width: 994px;
height: 160px;
margin: 0 auto;
/* topSection */
#topSection {
    width: 994px;
    margin: 0 auto;
    overflow: hidden;
#topSectionLeft {
    float: left;
    width: 300px;
#topSectionLeft h1 {
font-size: 24px;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
#topSectionLeft p {
margin: 0 0 0 0;
padding: 0 15px 15px 15px;
#topSectionRight p {
margin: 0 0 0 0;
padding: 0 15px 15px 15px;
#topSectionCentre {
    float: left;
    width: 456px;
#topSectionRight {
    float: left;
    width: 238px;
/* content */
#content {
    width: 994px;
    margin: 0 auto;
    overflow: hidden;
#content p {
font-family: "Comic Sans MS", cursive;
font-size: 18px;
color: #000;
margin: 0;
padding: 20px 20px 20px 20px;/*top, right,bottom,left*/
font-weight: bold;
text-align: center;
#rightContent {
float: left;
width: 694px;
min-height: 280px;
#footer {
    background-color: #FFC;
    width: 994px;
    margin: 0 auto;
#footer p {
    margin: 0px 0px 0px 0px; /*top, right, bottom, left*/
    padding: 0px 0px 0px 0px; /*top, right, bottom, left*/
</style>
</head>
<body>
<div id="header"></div>
<div id="navMenu">
<ul>
<li><a href="index_2.html">Home</a>
<ul>
</ul> 
</li> 
</ul> 
<ul>
<li><a href="stables.html">Gallery</a>
<ul>
<li><a href="stables.html">Stables</a></li>
<li><a href="fieldshelters.html">Field Shelters</a></li>
<li><a href="combination.html">Combination</a></li>
<li><a href="newdesign.html">New Designs</a></li>
<li><a href="optionalextras.html">Optional Extras</a></li>
</ul> 
</li> 
</ul> 
<ul>
<li><a href="prices.html">Prices</a>
<ul>
</ul> 
</li> 
</ul> 
<ul>
<li><a href="delivery.html">Delivery</a>
<ul>
<li><a href="areascovered.html">Areas Covered</a></li>
</ul> 
</li> 
</ul> 
<ul>
<li><a href="testimonials.html">Testimonials</a>
<ul>
</ul> 
</li> 
</ul> 
<ul>
<li><a href="#">Links</a>
<ul>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
</ul> 
</li> 
</ul> 
</ul> 
</li> 
</ul> 
<ul>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">link item</a></li>
</ul> 
</li> 
</ul> 
<br class="clearFloat" />
</div> 
<div id="topSection">
<div id="topSectionLeft">
<h1><strong>Mobile Field Shelters and Stables</strong> </h1>
<p>Bristol Equestrian Services have been supplying and designing quality Field Shelters and Stables for many years.
<p>We can design stables to custormer requirements and specifications.</p>
<p>The photograph to the right is our latest design and the feedback has been fantastic</p>
</div>
<div id="topSectionCentre">
<img src="http://46.20.119.224/~bristol1/images/newdesign.jpg" width="456" height="300" />
</div>
<div id="topSectionRight">
<p>Some content goes here</p>
</div>
</div>
<div id="content">
<div id="rightContent">
<h2>Quality Guaranteed Mobile Field Shelters and stables</h2>
<p>We appreciate how difficult it is for anyone to buy from the internet, especially a Stable or Field Shelter.   We are so confident that you will not be dissapointed with the quality that we offer ..........</p>
</div>
</div>
<div id="footer"><p>This is where the footer content goes</p></div>
</body>
</html>

Help with Bold/Italic CSS in EPUB export

Similar Messages

Maybe you are looking for