Question: Centered Heading With Line Through Middle

[RbnJrg]

Originally Posted by Jellby

Not very nice in my browser, if you ask me.

That is because your roman number is too large. You can fix that by setting a higher "width" to the "text" class and adjusting left and right margins (see the Tex's setting). And your web browser seems not to have a white background.

How does the epub I posted look in your ADE? How does it look in your ereader devices? Personally, I wouldn't bother if problems can happen in web browsers but not in ereader devices. In my Kindle, Android Tablet, ADE and Calibre Viewer look fine so far.

[Jellby]

Originally Posted by RbnJrg

That is because your roman number is too large. You can fix that by setting a higher "width" to the "text" class and adjusting left and right margins (see the Tex's setting). And your web browser seems not to have a white background.

I have a non-white background on purpose (easier on the eyes, helps spotting things that have a background and shouldn't ). And yes, I know the heading placement can be fixed, I just wanted to show that it can go wrong easily.

As long as we are relying on white background, wouldn't something like this work?

h2 {
   border-bottom: 3px solid;
   margin-top: -0.5em;
   margin-bottom: 0.5em;
   font-size: 1.4em;
   text-align: center;
}  

.text {
   position: relative;
   top: 0.7em;
   padding: 0 0.2em;
   background: white !important;
}

[RbnJrg]

Originally Posted by Jellby

I have a non-white background on purpose (easier on the eyes, helps spotting things that have a background and shouldn't ). And yes, I know the heading placement can be fixed, I just wanted to show that it can go wrong easily.

As long as we are relying on white background, wouldn't something like this work?

h2 {
   border-bottom: 3px solid;
   margin-top: -0.5em;
   margin-bottom: 0.5em;
   font-size: 1.4em;
   text-align: center;
}  

.text {
   position: relative;
   top: 0.7em;
   padding: 0 0.2em;
   background: white !important;
}

It could work in web browser but the "position: relative" could have problems in some ereader devices (ie. Kindle suports very bad "position: relative/absolute"). In "normal" mode and "night" mode, "background: white" it shouldn't be a problem; now, in "sepia" mode or with a custom background (very possible in android), then the "text" class, with a white background, will be noticeable

[Hitch]

Originally Posted by RbnJrg

It could work in web browser but the "position: relative" could have problems in some ereader devices (ie. Kindle suports very bad "position: relative/absolute"). In "normal" mode and "night" mode, "background: white" it shouldn't be a problem; now, in "sepia" mode or with a custom background (very possible in android), then the "text" class, with a white background, will be noticeable

Ruben:

I haven't tried this (we've had a bizarro-world week from hell here), but....with the neg. indent, don't you run into issues with all Kindles? Not just the whole KF7 versus KF8 thing, but when a user enlarges a font, and a negative indent is involved, if you don't use padding on the left-margin, doesn't it run off the edge of the screen? (although, I suppose, with a line, who would notice? )

Hitch

[RbnJrg]

Originally Posted by Hitch

Ruben:

I haven't tried this (we've had a bizarro-world week from hell here), but....with the neg. indent, don't you run into issues with all Kindles? Not just the whole KF7 versus KF8 thing, but when a user enlarges a font, and a negative indent is involved, if you don't use padding on the left-margin, doesn't it run off the edge of the screen? (although, I suppose, with a line, who would notice? )

Hitch

Hi Hitch;

Yes, I think you're right. Watch the following images:

1. Kindle Previewer (font-size: 3)




2. Kindle Previewer (font-size: 11)



As you can see, with a font-size "3", instead of "--- I ---- " we could also have written "--- II ---- " without problems. But with a font-size "11" that is not possible. So, we need to add code to manage that issue with bigger font-size and my "perfect solution" was not so perfect

[Hitch]

It's a miracle. I've been right for once. ;-)

Hmmmm.....I'd say, use padding L/R, maybe? To get a nice symmetrical appearance? While you're testing? Does that dog hunt, as we say here in the States?

Hitch

[RbnJrg]

Originally Posted by Hitch

It's a miracle. I've been right for once. ;-)

Hmmmm.....I'd say, use padding L/R, maybe? To get a nice symmetrical appearance? While you're testing? Does that dog hunt, as we say here in the States?

Hitch

Well, it seems the dog doesn't hunt Hitch; I tried with padding L/R and it doesn't work even with font-size "1"; watch the following picture:



As you can see, the number also is not centered. So, the only thing I can think is give "more width" to the class "text". But right now I'm having a new idea; I'm not sure if it will work but I'm thinking in a three column layout for the title I'll do some test and I will post my results.

[Hitch]

Originally Posted by RbnJrg

Well, it seems the dog doesn't hunt Hitch; I tried with padding L/R and it doesn't work even with font-size "1"; watch the following picture:

Attachment 119206

As you can see, the number also is not centered. So, the only thing I can think is give "more width" to the class "text". But right now I'm having a new idea; I'm not sure if it will work but I'm thinking in a three column layout for the title I'll do some test and I will post my results.

Ruben:

OK. Let us all know. This one is interesting, eh?

Hitch

[Jellby]

It should be "easy" with tables if you are willing to add all the extra markup. Not so much if you just want to write "<h2>XII</h2>" and have everything else done by CSS.

[Hitch]

Originally Posted by Jellby

It should be "easy" with tables if you are willing to add all the extra markup. Not so much if you just want to write "<h2>XII</h2>" and have everything else done by CSS.

Jellby, mon sweet:

Rather precarious for Kindle for iOS. I predict non-workage. ;-) Not to mention original Kindles. But, fershure, as they say, K4iOS will make the dog's breakfast of tables with no borders.

Hitch

[Tex2002ans]

HarryT's post (second in the topic) made me think of perhaps using a 3x3 table (with the center middle column merged to hold the large roman numeral). Mid-left and Mid-right having some sort of line inside.

The code failed miserably, so I didn't post about it (although I must admit, my table CSS skills are complete crap, so I was most likely doing something wrong with padding/margins/other magic).

It would have broken in just too many cases for my tastes (although it looked pretty good in Sigil).

Side Note: Actually, I just thought about it. Maybe the mid-left and mid-right can be filled with a background color? Maybe While top/bottom left/right can be to be 1.45em (1.45+1.45=2.9), the center middle can be 3em's large.

Maybe something along these lines:

<table>
<tr><td class="top"/><td class="romannumeral" rowspan="3">VIII</td><td class="top"/></tr>
<tr><td class="fillback"/><td class="fillback"/></tr>
<tr><td class="bottom"/><td class="bottom"/></tr>
</table>

table {
	width: 100%;
}

td.romannumeral {
	font-size: 3em;
	text-align: center;
	vertical-align: middle;
	width: 30%;
}

td.top, td.bottom {
	height: 1.45em;
	width: 35%;
}

td.fillback {
	background-color: gray;
}

Maybe more thoughts on how to tackle this will flow to me after nap time.

[RbnJrg]

I think I had success As I said before, I used a three columns layout but not by using tables! I just used the property "float: left" and it worked also in ADE!

In the css stylesheet, I wrote:

body {
   margin: 0;
   padding: 0;
}

.left_col {
   float: left;
   width: 33%;
   text-align: center;
   background: yellow; /* This is not necessary */
   border-top: 3px solid;
}

.double_col {
   float: left;
   width: 67%;
   text-align: center;
}

.col1 {
   float: left;
   width: 50%;
   background: aqua;  /* This is not necessary */
   margin-top: -0.5em;
   font-size: 1.4em;
   font-weight: bold;
}

.col2 {
   float: left;
   width: 50%;
   background: #ddd;  /* This is not necessary */
   border-top: 3px solid;
}

.cleared {
   clear: both;
   text-indent: 1.2em;
   text-align: justify;
}

In the .html code I wrote:

<h2></h2>
<div>
  <div class="left_col">&nbsp;</div>
    <div class="double_col">
      <div class="col1">MMXIV</div>
      <div class="col2">&nbsp;</div>
    </div>
</div>

<p class="cleared">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc...
</p>

The background colors I used are not necessary; they are there only for clarity. And also we can only use:

<div class="left_col"></div>

instead of:

<div class="left_col">&nbsp;</div>

The character &nbsp; is only necessary to show the background colors. And of course, we are free to change the width of the columns.

This is the way it looks in ADE:



Below I attach the respective .epub.

Regards
Rubén