I want to have a table with invisible borders in my ePub. I know how to add custom css, but how do I add the class to the table within Scrivener? Is that even possible or do I need to add the class in the ePub?
The normal way of getting a class onto something would be to add a style to it. The name of the style would be made CSS-safe and applied as a class name. Hence a paragraph styled “Invisible Block” would come out as:
<p class="invisible-block">...</p>
But unfortunately styles and tables are a bit oil and water, so you can’t use that technique, and even if you could there wouldn’t be a good hook for the whole table as the style more gets applied to the text in each cell individually.
The best way to do this is to use a div. There are two ways you could go about getting a div around a table.
Section Types
If you’re inclined toward detailed outlining, and putting tables into their own binder items isn’t off-putting to you, then creating a special Section Type for these tables is a clean and easy way to handle the problem from the writing side.
Here is what the set-up would look like on the compile side:
Compile Setup
- Open
File ▸ Compile..., and double-click on the compile format you’re using, in the left sidebar, to edit it. - In the Section Layouts pane, select “Section Text” (assuming you’re modifying the stock “Ebook” format), and click the
+button in the top right corner to duplicate it, calling the new one, “Invisible Table”. - In the Settings tab, set the CSS class name to whatever you want.
- Go into the Separators pane, and make sure that the new layout isn’t using default separators. It should just be either empty line or single returns, as you prefer (personally I would add the spacing with CSS rather than hacking empty paragraphs around the place, as “empty lines” does).
- Save settings, and be sure to assign the section type you created to the new “Invisible Table” Layout, via the
Assign Section Layouts...button in the middle column.
Styled Raw HTML
If you’d rather keep the tables in the text itself rather than in a separate section of the outline, then the best solution is to inject the necessary HTML directly, in the editor. We can do this simply with styles, which have a special option for passing through the styled text without any rich text conversion or punctuation escaping.
The stock “Ebook” compile format in fact has a pair of styles set up for this, so you only need to add a matching named style to your project to tap into that. If you’re starting from scratch with your own setup, you can open the “Ebook” format to its Styles to see how it sets up the “Raw HTML Block” and “Raw HTML” styles, for block and inline insertions, respectively.
Project setup
- In the editor, add
<div class="invisible-table">on a line above the table. - Format it however you want. Maybe grey text to diminish its visibility, with monospace font, whatever you want.
- With the cursor in the line, use the
Format ▸ Style ▸ New Style From Selection. All that really matters here is that it is a paragraph style called “Raw HTML Block”. - Add
</div>below the table, and style it.
Results
In both cases the result will be the same—these are just two different ways of putting a div around a block of content. So the HTML you’ll be working with:
<div class="invisible-table">
<table>
<snip ... />
</table>
</div>
And of course the CSS pane is where you can put the formatting stuff you want. You might want to check what CSS Scrivener is already generating for tables as well (in the “Default Stylesheet” column), as there might be some things you want override.
1 Like
Wow, thanks for the thorough answer, AmberV! I’m comfortable with html/css so I’ll give this a whirl.
Dan
1 Like
OMG, I just tried out the Raw HTML. This feature just opened up a whole new world for me. THANK YOU @AmberV !
Right? And bear in mind you can use a style like that in your Section Layout Prefix and Suffix fields as well (going beyond the basic CSS class hook I demonstrated above), meaning you can add more complex HTML around sections based on their type, without having to clutter the editor with typo-potential repetitions. Styles themselves also have a prefix/suffix system in the compile Format Designer, which for raw markup styles can allow for arbitrary elements to be placed around things.
The other checkbox to be aware of, in the Styles pane as well, is the Delete text of this style setting. Those same raw HTML insertions can thus all be stripped out in a different format designed for RTF or whatever else you need.
All around we designed the compile system to be capable of producing just about any plain-text format imaginable—you could even build your own HTML generator from scratch. Most of that would conventionally be done via the TXT format of course, but the raw markup switches let you tap into some of that power for ebooks as well.
My head is spinning with options! I’m an html/css veteran of 20+ years so I get the possibilities. I’ve never worked with eBooks so I’m sure they have their own limitations (no mouse = no hover, users can select different themes which makes hard-coding colors risky, and I’m sure there’s more I haven’t thought of).
I saw a book with nice illustrations in the upper corner of a part or chapter. I can see how to do that in an eBook now, but not sure how to do it in print just yet.
BTW, I’ll be teaching 4 Scrivener classes for my non-profit, New Hampshire Writers’ Project, in Feb and March (Scrivener for Writing I and II, Scrivener for Formatting, I & II… each class will be 1 hour), which is partly why I’m asking questions, also getting my butt in gear with some finishing touches on my novel. I see L&L offers classes too, I wonder if I should ask someone on your team to teach instead.
My advice is to download Adobe Digital Editions and Kindle Previewer (if relevant). These will cover most of what the hardware book reader market uses to display ebooks, and iBook (or whatever Apple calls it these days) will cover a lot of iDevice users. That will help you test what works and what does not, but in general a good rule of thumb is to think about what worked well ten years ago, and to forget about Javascript. I wouldn’t bother with flex containers or anything sophisticated like that, but floats and positioning work pretty well in my experience.
The trick is, like you brought up with colour, you have to think about all the possibilities for display. Using a float to display a small element like a drop cap is one thing, using it to display a sidebar info box—maybe not so good when the reader might be on a small budget phone.
Otherwise though, you’ll be right at home. An ebook is not unlike a little self-contained website with some XML glue, zip compressed down to a single file.
It wouldn’t hurt to ask through the support channel, it kind of depends on availability as we’re a small team, but we’ve done appearances and streams in the past.
Dear All,
could anybody could help me because i’m currentlw getting headaches with ebook compilation.
My ebook contains some tables where border are invisible.
I define a new style from this table.
And when I compile i have always a border 
Thanks for helping
Fred
I would think that if your ereader renders everything in black & null (white / background), you’d have to set your table’s borders to zero width.
Ebook table formatting has almost nothing to do with what you make it look like in your text editor, and everything to do with the CSS you use to design it. I’ve merged your query with the above conversation, which asked the same exact question: how to make a table without visible borders.
Also note that there are some different table designs in the Format as well, under the Tables & Lists section, and there are a couple with less bordering than others, but none without any. It’s worth noting those a CSS presets though, of course, so they do add what they do to the CSS compile format pane. You can then take these as a starting point and adjust them if you want.
If what you want is for all tables to look this way, then you could skip the whole part of the solution that goes into how one would mark such a table in the editor. Now that you know where CSS goes in your compile settings, you should be able to sort out some broad declarations about the design very simply.