Google Docs formatting not exported

[hebroin]

Hey,

I just started playing with this, but I already love the idea. I am wondering if there's a way to export formatting when using Google Docs? I managed to get a "rough" conversion of my doc in html, but no css is added.

Thanks

[max-barry]

Hi Heroin!

What formatting are you looking to retain?

Make sure you're using heading format in your google document. So top left in the Google Doc you've got "styles" and then heading 1, heading 2, etc. It doesn't matter what these look like in your Google doc, because you'll get generic h1, h2, h3 out the other side. You can then style them on your frontend as you see fit.

Bolds will become strong tags. Italics will become em tags.

The formatting that won't carry is colours etc. But you could use heading style 5 or 6 and style it such in your css.

At the moment I strip all classes from the generated markup, and hence the styles disappear. This is because I want clean markup coming out the API. A long term solution would be to inline all the styles, clear the classes, then selectively choose what styles to remove (e.g. Font family but not color).

[max-barry]

Obviously didn't mean to call you heroin. I'm on my phone! Autocorrect be damned

[hebroin]

Haha no problem,

Yeah I was think of css. If I export a docs from the File -> Download as -> Web Page option, I get the css in the header tag.

I understand that I could want to make custom style for my site but I could also want to keep the original formatting in a world where each post could be uniquely styled.

Maybe there could be a setting in the CMS config to specify if we want to keep the original formatting instead of cutting everything?

Also, I can't seemed to get the image to work. They're supposed to be added automatically to Google's CDN but the tag isn't formatted that way. Anything special to do?

Thx!

[hebroin]

Bold, Italic and underline doesn't work, just like title and subtitle. I think it would be nice to get a class title/subtitle on the

so we can style it accordingly.

See this for test file on my google drive

And here's the output "<div><p ><span ></span></p></div><p ><span >Title</span></p><p ><span >Subtitle</span></p><h1 ><span >Heading 1</span></h1><h2 ><span >Heading 2</span></h2><h3 ><span >Heading 3</span></h3><h4 ><span >Heading 4</span></h4><h5 ><span >Heading 5</span></h5><h6 ><span >Heading 6</span></h6><p ><span ></span></p><p ><span >Bold</span></p><p ><span >Italic</span></p><p ><span >Underline</span></p><p ><span ></span></p>"

[max-barry]

I like the idea of a preserveStyles setting configuration that prevents the css from being stripped out.

I'd caution that the styles Google docs adds are super junky. Lots of funny line spacing etc. Let me take a look though.

[max-barry]

Title and Subtitle styles don't have any HTML analogue. I mean... What would they come out as? H1s with a class? I'd rather keep to using the styles with an HTML analogue, especially since the more you style the headings the more Google gives you. It will give you h5, h6, h7 if you keep adding styles, from what I can remember.

[hebroin]

Yeah, I've looked at the imported html and it's indeed not pretty.

I am looking at the V3 version of the API which seems a little better at exporting. If I find something good, I'll let you know.

[airbr]

I found myself poking around this issue myself recently as I had to slice out those quotation marks around the raw google docs exported HTML I was placing into a view. Headings work along with inline links and unordered/ordered lists basically among basic HTML elements.

Im not sure how to help preserving styles - I wonder how much of this is a CANTFIX/WONTFIX because of limitations of using Google Docs as part of the free stack I guess. I say this particularly as so much of the generated HTML is quite dirty/based on apparent revision control from Google Docs itself.

I am interested in helping test/ write some docs or something. I have found this a fun/thought provoking little project to work with

[santuan]

Hello everybody!! I recently combine Drive CMS with and ember app and work like charm. So i was interested too in having some sort of way to target some of the tags and class that i could give some style. (I was thinking in a reset or a default css style)

I really like that almost everybody is capable of using a Sheet and a Doc. So i think im going to use in a lot of little projects.

This is the example i made in ember.js and hosted in github pages! https://github.com/santuan/ember-santuan-io

Thanks again for this work. It has already beign very helpful.

[max-barry]

Hey Santuan. Awesome! Love seeing it get used. I use it in many of my projects. Like you say, everyone knows a doc. I mean, Microsoft Word was maybe the first program I ever used?!

For transparency, I don't maintain this project any more. It still does the job but I find myself drifting towards more substantial options like Contentful or Prismic.io

Only stating that because I personally won't be doing more work on the project, and it has always felt like Google's APIs are subject to change.