Retain imported text formatting

Hi, I have a multi-paged CV formatted in Microsoft Word (about 18 pages). When I paste it into a text box, the formatting goes awry - some fonts become mixed, tab spacing is inconsistent, italics are lost and other issues. Is there a way to retain all these elements as is?

The CV will need to be regularly updated and imported, so reformatting in Sparkle each time is not an attractive proposition. If there is not simple way, could I embed a PDF version in a box instead? (and how? I can’t figure that out.)

Thanks for any help.
Stephen

Hi, By far, the easiest way around this is to export your doc in a PDF download and link to that.
What I do sometimes is to post a little thumbnail JPG image of the PDF to attract some attention then link to the PDF from that.
With an 18 page doc, this will likely be your best approach.

Dave

I think @macmancape has the right idea. However, I would go a little further and have the document display on the page. HERE is an example of what can be done with a multipage PDF in Sparkle.

It’s really quite simple to do. Just add an embed object onto your page. In the Embed Content box in the properties panel (right side of the interface) just paste the following code:

<iframe src="mycv.pdf" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="1329px" width="940px" allowfullscreen></iframe>

Change the name of the PDF file (shown above as mycv.pdf) to the name of the actual pdf file you want to display. If the file is already uploaded to your server. enter the full url instead of just the file name.

In this example, I’ve set the display size to H = 1329 x W = 940. You can change these dimensions to whatever you like.

Publish your page to a folder on your desktop and add the pdf file into the same folder. Preview in a browser and you should be good to go. Upload the files to your web host.

Since this is a CV you are looking to impress somebody in written form. Use Sparkle to your advantage and design a page for your CV. Sparkle is design software - So Design!

Copy the text from Word and paste into a text box in Sparkle. Highlight the text box and select the “style” menu. Select the + menu and create new “body”, “title”, and any other section styles you need. Then highlight the applicable portions of text and apply your CV specific styles. Call the knew styles something like “CVBody” so you can use them each time you update your CV.

Really make yourself standout…Make the text box scrollable. Add a subtle background to the page. Add a simple graphic. If your CV is chronological add a vertical timeline on the side that scrolls with your CV. You’ve got 18 pages, use a table, diagram, even a video if it applies to reduce the need for your viewers to read.

I do this for job search clients and it always makes a powerful impression on the employer. This is especially impressive if you are above the age of 40, as this approach will make you tech savvy competitive with the youngsters.

1 Like

@Playername, I think the best way to go about it is ditch the Word document and deign it out in Sparkle, like how @thetravelhikelife mentioned… it will present a better impact and skillset.

You can always have a pdf backup as a downloadable by either highlighting text or using a button and then go to the right-hand panel and “On Click” select “Download File”.

[That is a clever use of “iframe” @francbrowne, but how would that work when viewed on a mobile?]

Good luck! :)…

Hi thanks for all your suggestions, much appreciated.

Using a PDF that could be seen on the page and also downloadable would be ideal. I will try embedding as you suggested and thanks for the code.

One thing, someone mentioned this may not work for mobile devices and when I clicked on the example on my iPad, What seems to be a multi page document only showed one page. Is that the issue?

I had hoped I could simply show a PDF in an image or text box but this doesn’t seem possible.

Designing it on the page itself would mean replicating all the information in two places or more, as the cv is also used in word format and needs to be updated regularly and formatted for different purposes. It is an artist’s cv, not a professional one, so incorporates a running list of exhibitions, articles, and so forth updated more or less monthly.

Cheers

Iframes have never really been a good option for touch-screen devices. This is because the device can’t always distinguish between swiping the page or swiping the content of the iframe. There are CSS tricks that can be used to force iFrames to be scrollable, but the effect on other devices can be a bit unpredictable.

If I was you, I would only show the scrollable iFrame on desktops and hide it on all other devices. You can then create a different page layout for the touch screen devices that allows people to click a link to open in a new tab/window. This will also allow them to save the PDF if they want to.

Anyway, take a look at my demo again on your iPad (in portrait or landscape mode) you will see that it will display differently. Typically, you would create this different layout for all but the wide desktop variant of your site. This will ensure that users do not see issues when trying to scroll the page or the iframe content.

Mobile is killing iframes as mobile did to Flash. It just not as entertaining this time around without Steve Jobs to drive a journalistic stake through its heart as he did with Flash.

The way I design with iframes on mobile is I reduce the iframe width and place a colored/textured box/border around it so users have a differentiated place to scroll. This ability to optimize design for specific layouts and devices is a significant value add of Sparkle.

The issue here is that a scrollable iframe is difficult to get working on certain mobile devices. They can be created just fine at different sizes to suit the viewport, but they simply don’t function as they should without wrapping them in a div and adding some CSS. There was a time when scrollable iframe content could be scrolled on an iPad by swiping with two fingers instead of one. That ability seemed to have been removed during one of the OS upgrades. In general, iframes do work just fine on desktop and mobile, it’s only if the content needs to be scrolled that issues occurs. Most solutions require code such as the following to be included:

    <div style="overflow:auto;-webkit-overflow-scrolling:touch">
      <iframe src="./yxz" style="width:100%;height:100%">
    </div>

Of course, there are other solutions that rely on javascript that work across all devices, but these are not iframes as such. I think Sparkle uses one such solution to create its scrollable text boxes. But, the creation of a border around an iframe isn’t going to resolve the issue.

New Information means a revised suggestion…

Designing it on the page itself would mean replicating all the information in two places or more, as the cv is also used in word format and needs to be updated regularly and formatted for different purposes. It is an artist’s cv, not a professional one, so incorporates a running list of exhibitions, articles, and so forth updated more or less monthly.

Could you eliminate the Word step? What you are describing is a website, a blog. Use Sparkle as your first step where you format. Sparkle’s text formatting is one of its strengths. Create sections for exhibitions, articles, and other information and now you have a web page/blog. Add the download button for the PDF version. A PDF can be created by previewing the web page and exporting as a PDF in the web browser.

If the different formats you need are used consistently then create a separate page for each version.
You don’t have to show all versions on the web, you can hide as needed from the menu. Each page would still have its own link you can distribute as needed. I create these for artists, art galleries, photographers, and musicians who have constantly changing information and multiple distribution needs to diverse audiences.

The benefits of this workflow is it streamlines your workflow, enhances the presentation of the artist, and ensures the audience they have the most current information.

1 Like

Hi thanks once again for your help.

Especially for going to the trouble of resetting your PDF example francbrown. Just having the PDF scrollable for the desktop and a downloadable one for mobiles is the solution I think and elegantly demonstrated by your example.

And travekhikelife, I really like your suggestion of shifting the workflow to create and edit in sparkle first and then output to other formats - that is really thinking outside the box. It would work too, except for the world wide dominance of Microsoft word. (and all I want to do is simply put a formatted cv on a website). It’s complicated, but I also have to produce and output in word due to institutional ties. (

Cheers

I hope the solution works for you. By the way, if you keep the iframe height smaller than the PDF page size, when viewed in safari users will see zoom, view and download options when hovering over the iframe. This doesn’t happen when the iframe is set to display the full document page. This is how the options look:

Users of other browsers, such as Chrome will see the zoom and download options regardless of iframe size. In chrome, the options look like this:

On the mobile variants, these options are not displayed because mobile devices have built in options for downloading and zooming as part of their normal operation.

Nice!
Thanks again for your very generous help
cheers