centered text having a specific width

Vroni · 07-31-2019, 03:59 AM

Hi,

i cant get a centered text having a specific width. Simple Example:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p class="test">Test test test</p>
</body>
</html>

Code:

p.test {
  text-align: center;
  border-bottom: 1px solid black;
  width:10em;
}

As soon as i add the width to the style the text is no longer centered. Without it, the border sticks out to far,

I tried with divs but wanst succesful. Any idea? And of course i need this worklng in ADE and RMSDK

Vroni

jackie_w · 07-31-2019, 05:13 AM

You could try something like:

Code:

p.test {
  border-bottom: 1px solid black;
  text-align: center;
  width: 40%;
  margin: 0 30%;

Adjust percentages as necessary as long as they add up to 100%.

I don't know whether this is the *best* way but it could be *a* way.

JSWolf · 07-31-2019, 06:20 AM

You have to use a % for the width as screens vary of different widths. So using em just will not work

Vroni · 07-31-2019, 07:25 AM

Hi thanks so far but i would like to have the length of the line related to the text, not to the screen width.

jhowell · 07-31-2019, 08:33 AM

"text-align" centers the text within the paragraph. It does not center the paragraph on the page. To do that use "margin-left: auto; margin-right: auto".

Vroni · 07-31-2019, 10:23 AM

Unfortunately, margin auto can be ignored by epub specs and this is what ADE/RMSDK is exactly doing.

jhowell · 07-31-2019, 02:12 PM

Quote:

Originally Posted by Vroni

Unfortunately, margin auto can be ignored by epub specs and this is what ADE/RMSDK is exactly doing.

I didn't know that.

Perhaps something like "margin-left 30%; margin-right 30%" might work.

Vroni · 08-01-2019, 04:36 AM

Margins are taking the screenwidth into aspect, which i dont want. I would like to adjust the length of the line in respect to the text.

jhowell · 08-01-2019, 08:44 AM

Quote:

Originally Posted by Vroni

I would like to adjust the length of the line in respect to the text.

What do you mean by that?

If you want to have the text broken up at the same point regardless of screen and font size then inserting line breaks seems like a good option to me.

Hitch · 08-01-2019, 11:51 PM

Quote:

Originally Posted by jhowell

What do you mean by that?

If you want to have the text broken up at the same point regardless of screen and font size then inserting line breaks seems like a good option to me.

S/he means, if I am not mistaken, that he's trying to ensure that the line is always the same width as the text, which I can tell you right now, ain't possible. Not without the use of tables--and even then, the results are not great.

Hitch

Sunlite · 08-02-2019, 12:34 PM

I tried the following and it does what you want in a browser.

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
  p.test {
    text-align: center;
  }
  span.test {
    padding: 0 1px;
    border-bottom: 1px solid black;
  }
</style>
</head>
<body>
<p class="test"><span class="test">Test test test</span></p>
</body>
</html>

The Pros can probably tell you in which ebook it will break.

GeoffR · 08-02-2019, 03:53 PM

Quote:

Originally Posted by Vroni

As soon as i add the width to the style the text is no longer centered. Without it, the border sticks out to far,

I tried with divs but wanst succesful. Any idea? And of course i need this worklng in ADE and RMSDK

Vroni

With these additions in red it worked in ADE 1.7.2, Kobo RMSDK10, and Calibre 2.85:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="center">
<p class="test">Test test test</p>
</div>
</body>
</html>

Code:

div.center {
  text-align: center;
}
p.test {
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid black;
  width:10em;
}

Hitch · 08-02-2019, 05:25 PM

Quote:

Originally Posted by GeoffR

With these additions in red it worked in ADE 1.7.2, Kobo RMSDK10, and Calibre 2.85:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="center">
<p class="test">Test test test</p>
</div>
</body>
</html>

Code:

div.center {
  text-align: center;
}
p.test {
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid black;
  width:10em;
}

ADE 4.x?

Hitch

GeoffR · 08-02-2019, 05:28 PM

Quote:

Originally Posted by Hitch

ADE 4.x?

No idea, I don't have any device that can run ADE 4.

GeoffR · 08-02-2019, 05:42 PM

If you don't actually want a specific width, just a border that is the same width as the text, with these additions in red it worked in ADE 1.7.2, Kobo RMSDK10, and Calibre 2.85:

(Edit: I've added a break in the paragraph to show the difference between this and Sunlite's solution, which is what happens when the paragraph has more than one line: this solution has a border under the whole paragraph, Sunline's has a border under each line.)

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="center">
<p class="test">Test test<br/>test</p>
</div>
</body>
</html>

Code:

div.center {
  text-align: center;
}
p.test {
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid black;
  /*width:10em;*/
}

07-31-2019, 03:59 AM	#1
Vroni Banned Posts: 168 Karma: 10010 Join Date: Oct 2018 Device: Tolino/PRS 650/Tablet	centered text having a specific width Hi, i cant get a centered text having a specific width. Simple Example: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head> <body> <p class="test">Test test test</p> </body> </html> Code: p.test { text-align: center; border-bottom: 1px solid black; width:10em; } As soon as i add the width to the style the text is no longer centered. Without it, the border sticks out to far, I tried with divs but wanst succesful. Any idea? And of course i need this worklng in ADE and RMSDK Vroni

07-31-2019, 05:13 AM	#2
jackie_w Grand Sorcerer Posts: 6,266 Karma: 16544702 Join Date: Sep 2009 Location: UK Device: ClaraHD, Forma, Libra2, Clara2E, LibraCol, PBTouchHD3	You could try something like: Code: p.test { border-bottom: 1px solid black; text-align: center; width: 40%; margin: 0 30%; Adjust percentages as necessary as long as they add up to 100%. I don't know whether this is the best way but it could be a way.

08-02-2019, 05:42 PM	#15
GeoffR Wizard Posts: 3,821 Karma: 19162882 Join Date: Nov 2012 Location: Te Riu-a-Māui Device: Kobo Glo	If you don't actually want a specific width, just a border that is the same width as the text, with these additions in red it worked in ADE 1.7.2, Kobo RMSDK10, and Calibre 2.85: (Edit: I've added a break in the paragraph to show the difference between this and Sunlite's solution, which is what happens when the paragraph has more than one line: this solution has a border under the whole paragraph, Sunline's has a border under each line.) Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="center"> <p class="test">Test test<br/>test</p> </div> </body> </html> Code: div.center { text-align: center; } p.test { display: inline-block; text-align: center; border-bottom: 1px solid black; /width:10em;/ } Last edited by GeoffR; 08-02-2019 at 05:54 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Strange, specific bug rendering centered text w/ p class command in Nook touch	ljcblue	ePub	2	05-23-2014 12:43 PM
Conversion ePub -> azw3, text centered	apeiron75	Calibre	0	05-18-2013 12:28 PM
Calibre screwing up centered-text b/c of forced tabs	lurker316	Calibre	0	12-21-2010 09:36 PM
.epub hyperlinks, centered and non indented text.	Xabache	ePub	2	09-13-2010 01:11 PM
Centered and right aligned text for Stanza on iPhone	Arjen	ePub	6	06-17-2010 12:19 PM

07-31-2019, 06:20 AM	#3
JSWolf Resident Curmudgeon Posts: 80,677 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You have to use a % for the width as screens vary of different widths. So using em just will not work

07-31-2019, 07:25 AM	#4
Vroni Banned Posts: 168 Karma: 10010 Join Date: Oct 2018 Device: Tolino/PRS 650/Tablet	Hi thanks so far but i would like to have the length of the line related to the text, not to the screen width.

07-31-2019, 08:33 AM	#5
jhowell Grand Sorcerer Posts: 7,155 Karma: 92500001 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	"text-align" centers the text within the paragraph. It does not center the paragraph on the page. To do that use "margin-left: auto; margin-right: auto".

07-31-2019, 10:23 AM	#6
Vroni Banned Posts: 168 Karma: 10010 Join Date: Oct 2018 Device: Tolino/PRS 650/Tablet	Unfortunately, margin auto can be ignored by epub specs and this is what ADE/RMSDK is exactly doing.

08-01-2019, 04:36 AM	#8
Vroni Banned Posts: 168 Karma: 10010 Join Date: Oct 2018 Device: Tolino/PRS 650/Tablet	Margins are taking the screenwidth into aspect, which i dont want. I would like to adjust the length of the line in respect to the text.