Skip navigation
Currently Being Moderated

Converting italic text to HTML

Nov 6, 2012 11:30 AM

Friends,

 

Does In Design CS 5.5 have the power to convert text that uses italics to text that uses <i> and  </i> ??

 
Replies
  • Currently Being Moderated
    Nov 19, 2012 2:35 PM   in reply to Ceencha

    Your question is so vague that no one knows how to answer it.  Let me help you a bit here: tell us about your target format. Are you exporting something from InDesign? How are you doing it? (File -> Export -> ?) What settings are you using? Please be specific. Have you already tried it? If so, what did you get, and how was it not what you expected? 

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 7:18 PM   in reply to Ceencha

    Those are deprecated tags. Use em and strong.

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 7:40 PM   in reply to Ceencha

    I'm presuming that you mean you want to export the text from ID and have it tagged in the HTML. That's outside my workflow, but my understanding is that if you've applied a style to make that formatting happen, you should get a style for it inthe CSS style sheet  that is generated when you do the export and the text itself will be tagged with that style automatically. That's a little different from waht you asked, but what you are looking for, I think.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 11:28 PM   in reply to Ceencha

    As it happens it's dead easy.

     

    Go to the find and change dialogue

    Click on the Grep Tab

    Click on the magnifying glass next to the find format

    Click on Basic....

    Click on Italic (take care to get the right Italic 99.9% of the time it's Italic)

    Click OK

    On the Change part Type <i>$0</i>

    Click change all

     

    I'll leave it to you to figure out how to do the bold one

     

    Do yourself's a favor blokes and read Peter's book on Greps! http://shop.oreilly.com/product/9780596156015.do

    _Untitled-1 @ 200%_2012-11-20_09-11-36.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 5:14 AM   in reply to Trevorׅ

    @ Trevor,

     

    Yes, it's dead easy to add the tags in the text in ID, and I nearly posted that, but that isn't really what ceencha is asking, to my understanding. The way I've read what he says is that the text is formatted and he want to export his page to html and have the html also format that text. As I said above, if a style is applied I believe that format tagging should be automatic on export.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 5:26 AM   in reply to Peter Spier

    I wouldn’t use automatic. If you do you wind up with classes and a mess of CSS.

     

     

     

    I would have a character style for bold and one for italic. Those styles should be mapped to strong and em tags.

     

     

     

    Every browser in existence will display them as bold and italic and of course that can be further styled by creating CSS rules for them.

     

     

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 5:33 AM   in reply to Bob Levine

    For the record, Bob does this stuff all the time, and I do not.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 8:07 AM   in reply to Bob Levine

    Hi Peter,

     

    From reply #3 I think I think I understood what Cheencha was asking, but we shall wait and see.

     

    If one wants to go Bob's way and the document was already written then one should use find and change to set the bold / italic character style so they can be mapped.

     

    Trevor

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 8:16 AM   in reply to Trevorׅ

    my reading of reply #3 was that he was asking if he had to edit the html to add the tags, but we'll see.

     

    Certainly, though, if the text isn't already carrying styles, find/change is the fast way to add them.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 9:20 AM   in reply to Ceencha

    My own findings on this subject are that it's not as straight forward as you might think to do this. Even when you map the tags to styles, it adds classes and not the tag you would require. However, there seems to be a way around it.

     

    As has been mentioned here, if you create paragraph and character styles for your text - character for italic and bold, paragraph for headings - and then create tags (window > utilities > tags) the same as the HTML ones - h1, p, em, strong etc - you can then map the styles to those tags. However, when you export as HTML these are still converted to CSS classes and if you don't export the CSS, they all become <p> tags with <span>. Instead, export it as XML and change the file extension to HTML as you do this. It will correctly export the HTML tags but without the CSS styling. It depends on your workflow as to whether this is useful because you may be looking for both the CSS and the tags. In which case, I would probably do 2 exports. It may also be easier to export as HTML and then find and replace the generated classes with the tags. Eg. Find <span class="italic">, replace with <em>.

     

    I came across this old article for CS2 that kind of covers this but it might have changed since: http://indesignsecrets.com/how-to-export-basic-html-out-of-cs2.php

     

    Also, <i> and <b> are not deprecated - there are just better alternatives in most cases like <em> and <strong>.

    http://www.w3schools.com/tags/tag_b.asp

    http://www.w3schools.com/tags/tag_i.asp

     

    InD_MapTagstoStyle.pngInD_XMLHTML_2.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 10:35 AM   in reply to Rik Ramsay

    What version of InDesign are you using?

     

    Classes are not added to mapped styles. The only time you get a class is if you specify one or if you choose automatic.

     

    Also, if you want to use i and b, knock yourself out. But they most certainly SHOULD NOT be used anymore.

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 10:48 AM   in reply to Bob Levine

    BTW, here's a screenshot of what your HTML export  should look like. You can of course choose to use your own CSS. InDesign will only generate classes if you tell it to.

    11-20-2012 1-45-45 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 11:07 AM   in reply to Bob Levine

    You are of course correct Bob. However, my answer was written to aid the OP in his quest to get the HTML tags to appear. With no CSS, it generates the same HTML as with CSS - there are just no classes attached which is not what he was looking for. As I said:

    However, when you export as HTML these are still converted to CSS classes and if you don't export the CSS, they all become <p> tags with <span>

    Below is an HTML export with NO CSS and WITH CSS. I am using InDesign CS5.5. Unless I am missing something?

    Screen Shot 2012-11-20 at 10.50.39 AM.pngScreen Shot 2012-11-20 at 11.04.08 AM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 12:46 PM   in reply to Rik Ramsay

    The first one is fine, but you need to create a character style for the bold and italic. Those then need to be mapped to strong and em.

     

    Right now that text is separate paragraphs which is fine if the entire paragraph is going to be italic. But if that's the case, you'd then map it to p and assign a class to it of italic and set the rule in CSS for font-style, but for just a couple of words, applying the character style mapped to em would give you the correct em tag with no class.

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 1:06 PM   in reply to Bob Levine

    These were all made with the same file and as per screenshot 1, I have mapped the character styles correctly. As I said, the HTML tags only show when exported as XML and I change the file extension. Otherwise, the last 2 screens show what happens when exported as HTML - same mapping as the first one.

     

    But, in interest of covering all bases, below is it all on one line. If you can get something different, can you post your results?

    Screen Shot 2012-11-20 at 1.03.34 PM.pngScreen Shot 2012-11-20 at 1.04.31 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 2:59 PM   in reply to Rik Ramsay

    Here you go:

     

    tags.png

    and:

     

    mapped.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:09 PM   in reply to Bob Levine

    It looks like you're running CS6. The OP and I are using CS5.5. Could that be the difference? No matter what I try, when I export as HTML I get the same result - no em or strong tags. I would imagine this is why the OP asked the question initially.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:23 PM   in reply to Rik Ramsay

    I've done this with CS5.5 as well and haven't seen any issue with it. But I'll go back and check to be sure when I have a chance.

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:25 PM   in reply to Bob Levine

    I see the same a Rik unless I embed the CSS...

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:38 PM   in reply to Peter Spier

    Here you go. This is the result in CS5.5 with no CSS selected on the export:

     

    cs55.png

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:40 PM   in reply to Bob Levine

    If it will help, here's a link to that small INDD file. https://dl.dropbox.com/u/2548785/InDesign%20to%20HTML%20demo.indd

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:48 PM   in reply to Bob Levine

    OK. I now see where I have either gone wrong, or got confused.

     

    I set the file up, with paragraph styles and character styles and then opened the tags window and created appropriate tags. I then used Map Tags to Styles (or Map Styles to Tags) to create the link between them. As you can see from my structure, this worked fine. On export this did not create the HTML tags required. However, when I went into the Paragraph/Character style palette and edited the export tags, they were unmapped. I mapped them and got the same result as Bob.

     

    As that is the case, what is the point of the 'Map Tags to Styles' option if the tags are not exported?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:51 PM   in reply to Bob Levine

    Bob, where are you getting that Edit All Export Tags dialog? I don't see that dialog anywhere I've looked...

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:54 PM   in reply to Rik Ramsay

    Are you sure you didn't map them to PDF tags?

     

    Peter, it's a choice in either the character or paragraph styles panel.

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:55 PM   in reply to Rik Ramsay

    I was doing the same as Rik, and getting the same results. Changed the tagging in the style itself, et voila.

     

    I agree. Whats up with the commands in the tags panel?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 3:57 PM   in reply to Bob Levine

    Bob Levine wrote:

    Peter, it's a choice in either the character or paragraph styles panel.

    Bingo!!!!!!!!!!!!!!!!!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 7:52 AM   in reply to Peter Spier

    Bob

     

    Anyway of doing it on cs5 other than the way rick says in reply 13?

     

    The doesn't seem to be any options on the character or paragraph panels to do with mapping

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 8:46 AM   in reply to Trevorׅ

    No. Mapping styles to tags was one of the major improvements in CS5.5 that received very little notice from the print crowd.

     

     

     

    You might want to consider upgrading to Creative Cloud. With intro pricing the first year is only $29.99/month.

     

     

     

    You can find details here:http://www.adobe.com/products/creativecloud.html

     

     

     

    Bob

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 9:59 AM   in reply to Bob Levine

    Thanks for the special offer Bob but as a member of the print crowd I'd rather stay with my cs5 and rely on Nick trick if I ever needed it.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 10:00 AM   in reply to Trevorׅ

    P.s. Shame we never heard from Cheena

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 21, 2012 12:44 PM   in reply to Trevorׅ

    On a positive note, I'm sure at some point this thread will be of help to someone.

     

    Please note that you will not have any upgrade rights once CS7 rolls around which should be sometime in the April/May time frame. You'll have to pay full price or move to Creative Cloud.

     

    Bob

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points