Highlighted

'conditions' required for responsive HTML5 content?

Engaged ,
Aug 18, 2017

Copy link to clipboard

Copied

It's been a while (several months) since I had to generate responsive HTML from my docs, and need some tips.

Content is to be delivered as .pdf (that's the norm), and as html5.

Content that I recall posed problems for me in the past, and content that is posing problems right now, includes the following, which I've had to address by duplicating the content and turning it into conditional text. What I'd like to know is if there are settings that can be done to address the issues without having to use conditions (and duplicated content). Any help is appreciated 🙂

  • Tables - Our documents have room for on the left for side heads. So, tables that fit in the main text area (not extending into side heads) are Left justified. If a table is too wide (must start somewhere in the side-head area and extend to the right-hand margin), it gets set as right-justified.
    That works fine for .pdf. However, for html5, the right-justified tables anchor on the right edge of the webpage. So, the only solution I found was to duplicate the table and make it left-justified and apply condition 'PrintCondition' to the right-justified table, and apply 'PDFCondition' to the left-justified table.
    Is there a different way to accomplish this?
  • Figures - I have some figures (in anchored frames) in indented paragaphs, only content on line. I use anchoring position At Insertion Point and the frames left-justify as desired (these are images that are hanging below corresponding indented instructions steps). Works fine in PDF, but if I generate HTML5, they left-justify on the webpage (so not in line with indented steps).
    For HTML5, I had to duplicate the paragraph (with image), and use a 'wide' paragraph format (extends into side-heads), use anchoring position Below Current Line, and then manually position the image inside the anchored frame so that it would appear indented in the webpage.
    I'm sure there's a better way to do this, but I'm getting all twisted up.
  • Text with background color -- In my PDFs, I have text (linux commands) that the user must enter. For these, I used a paragraph type that had  Pgf Box set with a color. This looked great, but.... it gets rendered as a graphic when HTML5 is generated. Can't have that, because users need to cut from doc to paste in terminal emulator.
    So... I set Pgf Box back to none, and the set background color on the Fonts tab of Paragraph Designer. Not as nice since doesn't define an actual 'box' around multi-line commands, but acceptable (the text itself has background color).
    HOWEVER, if I generate HTML5 'as-is', the background color doesn't appear on the text.
    If I modify the style mapping and set the Background Background-color, the color doesn't appear on the text, it only appears *after* the text
    If I create a *new* paragraph style (duplicate of the one that works in pdf), but don't have a background color, and then I set the Background Background-color style, the color *does* appear on the text, but also extends all the way to the edge of the page.
    So... I'm having to duplicate my 'command' content, apply PrintCondition to the content with a background color, and apply PDFCondition to the content with a different paragraph style that does not have background color, and apply a css style mod for the background-color.
    Again, this seems like a lot of work 🙂

If anybody can point me toward easier solutions, that would be... WONDERFUL! 🙂

Thanks either way.

Views

219

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

'conditions' required for responsive HTML5 content?

Engaged ,
Aug 18, 2017

Copy link to clipboard

Copied

It's been a while (several months) since I had to generate responsive HTML from my docs, and need some tips.

Content is to be delivered as .pdf (that's the norm), and as html5.

Content that I recall posed problems for me in the past, and content that is posing problems right now, includes the following, which I've had to address by duplicating the content and turning it into conditional text. What I'd like to know is if there are settings that can be done to address the issues without having to use conditions (and duplicated content). Any help is appreciated 🙂

  • Tables - Our documents have room for on the left for side heads. So, tables that fit in the main text area (not extending into side heads) are Left justified. If a table is too wide (must start somewhere in the side-head area and extend to the right-hand margin), it gets set as right-justified.
    That works fine for .pdf. However, for html5, the right-justified tables anchor on the right edge of the webpage. So, the only solution I found was to duplicate the table and make it left-justified and apply condition 'PrintCondition' to the right-justified table, and apply 'PDFCondition' to the left-justified table.
    Is there a different way to accomplish this?
  • Figures - I have some figures (in anchored frames) in indented paragaphs, only content on line. I use anchoring position At Insertion Point and the frames left-justify as desired (these are images that are hanging below corresponding indented instructions steps). Works fine in PDF, but if I generate HTML5, they left-justify on the webpage (so not in line with indented steps).
    For HTML5, I had to duplicate the paragraph (with image), and use a 'wide' paragraph format (extends into side-heads), use anchoring position Below Current Line, and then manually position the image inside the anchored frame so that it would appear indented in the webpage.
    I'm sure there's a better way to do this, but I'm getting all twisted up.
  • Text with background color -- In my PDFs, I have text (linux commands) that the user must enter. For these, I used a paragraph type that had  Pgf Box set with a color. This looked great, but.... it gets rendered as a graphic when HTML5 is generated. Can't have that, because users need to cut from doc to paste in terminal emulator.
    So... I set Pgf Box back to none, and the set background color on the Fonts tab of Paragraph Designer. Not as nice since doesn't define an actual 'box' around multi-line commands, but acceptable (the text itself has background color).
    HOWEVER, if I generate HTML5 'as-is', the background color doesn't appear on the text.
    If I modify the style mapping and set the Background Background-color, the color doesn't appear on the text, it only appears *after* the text
    If I create a *new* paragraph style (duplicate of the one that works in pdf), but don't have a background color, and then I set the Background Background-color style, the color *does* appear on the text, but also extends all the way to the edge of the page.
    So... I'm having to duplicate my 'command' content, apply PrintCondition to the content with a background color, and apply PDFCondition to the content with a different paragraph style that does not have background color, and apply a css style mod for the background-color.
    Again, this seems like a lot of work 🙂

If anybody can point me toward easier solutions, that would be... WONDERFUL! 🙂

Thanks either way.

Views

220

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 18, 2017 0
Adobe Community Professional ,
Aug 19, 2017

Copy link to clipboard

Copied

Quite a list of specifics!

It sounds like you'll want to create a separate template with alternate definitions for your styles, including Object Styles (hint: Object Styles will let you control larger swaths of settings across multiple templates.) That should knock out most of the items.

After that, I suggest you redefine some of your print "nice-to-have" formatting to accommodate your HTML5 output. You shouldn't have to sacrifice much, but it'll make conversion much more straightforward.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 19, 2017 0