Left-justified text in a right-justified box

Skeezix · 11-15-2011, 11:38 AM

So for this book I'm formatting, I need to have a block of text where the box itself is flushed right, but the text inside the box is left-justified. In web browsers, I can accomplish that like this:

Code:

<div style="float: right">
   <p style="text-align: left">First line<br>
      Second line</p>
<div>

<p style="clear: both">And back to regular text.</p>

But when I convert this in Calibre, it centers the text instead.

Anyone know why this is happening and/or how I can get it to do what I want?

ldolse · 11-15-2011, 12:04 PM

Might help if you pasted the relevant code/styles applied by Calibre on these tags and their parents after conversion. It would also help to know how you're viewing the converted content. When you get into more complex styling like this you're often dealing with reading system compatibility issues vs Calibre problems.

Skeezix · 11-15-2011, 08:08 PM

Quote:

Originally Posted by ldolse

Might help if you pasted the relevant code/styles applied by Calibre on these tags and their parents after conversion. It would also help to know how you're viewing the converted content. When you get into more complex styling like this you're often dealing with reading system compatibility issues vs Calibre problems.

Good idea. I managed to strip it down to a tiny HTML page, reproduced here:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Test case</title></head><body>

<div style="float: right">
   <p>This is the first line, a little longer than<br>
      The second line.</p>
</div>

</body></html>

If you view that in Firefox, IE, or Chrome, you'll see it how I want it to look.
When I compile it into a MOBI with Calibre, I just end up with those lines flush left. (I viewed the MOBI in the Kindle emulator and on my Kindle 3.)

Here's what the file looks like from the "processed" folder in the debugging folder:

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test case</title>
    
  
<meta content="http://www.w3.org/1999/xhtml; charset=utf-8" http-equiv="Content-Type"/><link href="stylesheet.css" type="text/css" rel="stylesheet"/><style type="text/css">
		@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }</style></head>
  <body class="calibre">

<div class="calibre1">
   <p class="calibre2">This is the first line, a little longer than<br class="calibre3"/>
      The second line.</p>
</div>

</body>
</html>

And here's its stylesheet.css:

Code:

@namespace h "http://www.w3.org/1999/xhtml";
.calibre {
    display: block;
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    page-break-before: always
    }
.calibre1 {
    float: right
    }
.calibre2 {
    display: block;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em
    }
.calibre3 {
    display: block
    }

kovidgoyal · 11-15-2011, 08:41 PM

MOBI does not support float. You'd could try some table based hackery to get the effect, but support for tables is highly limited in MOBI as well.

DiapDealer · 11-15-2011, 08:44 PM

Quote:

I need to have a block of text where the box itself is flushed right, but the text inside the box is left-justified.

I don't think you can do what you're trying to do in the mobi format. You can use text-align left/center/right/justify and assign left-margins (which will be converted to blockquotes), but that's about it.

You may be able to fudge something up with tables, but tables aren't really recommended for layout purposes with the MOBI format. You could also create an image of left-justified text and then right-align that image (which won't resize when a user changes font sizes).

But I would just use a normal justified paragraph and assign a large left margin to push the text to the right. It's about the best you're going to be able to with MOBI.

11-15-2011, 11:38 AM	#1
Skeezix Enthusiast Posts: 28 Karma: 10 Join Date: Jun 2011 Device: Kindle	Left-justified text in a right-justified box So for this book I'm formatting, I need to have a block of text where the box itself is flushed right, but the text inside the box is left-justified. In web browsers, I can accomplish that like this: Code: <div style="float: right"> <p style="text-align: left">First line<br> Second line</p> <div> <p style="clear: both">And back to regular text.</p> But when I convert this in Calibre, it centers the text instead. Anyone know why this is happening and/or how I can get it to do what I want?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Formatting an eBook - Left justify or Justified	simonroyle	General Discussions	145	07-06-2020 07:38 PM
Sony eBookstore - Justified Text?	SCION	Sony Reader	17	09-22-2011 05:30 PM
justified text	sovre	Sony Reader	2	07-24-2011 11:29 PM
How is smoothly justified text achieved?	polyfragmentiert	ePub	6	11-19-2009 11:13 PM
Justified text in ePub?	kiwik	ePub	5	03-07-2009 02:35 PM

11-15-2011, 12:04 PM	#2
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	Might help if you pasted the relevant code/styles applied by Calibre on these tags and their parents after conversion. It would also help to know how you're viewing the converted content. When you get into more complex styling like this you're often dealing with reading system compatibility issues vs Calibre problems.

11-15-2011, 08:41 PM	#4
kovidgoyal creator of calibre Posts: 45,144 Karma: 27110894 Join Date: Oct 2006 Location: Mumbai, India Device: Various	MOBI does not support float. You'd could try some table based hackery to get the effect, but support for tables is highly limited in MOBI as well.

Advert

Advert