text span 2 characters (fixed font width)

[Gernot Frisch]

Hi,

I have a <pre> block in which I want a greek character that spans 2 characters (centered, preferably) of the regular ascii
alignment.

 

[123Jim]

Hi,

I have a <pre> block in which I want a greek character that spans 2
characters (centered, preferably) of the regular ascii alignment.

--

http://www.w3schools.com/tags/tag_pre.asp

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

so just specify what you want in your editor?

e.g.
<pre> text text <big><big>&Sigma;</big></big> text text </pre>

note: I'm not an expert

 

[123Jim]

http://www.w3schools.com/tags/tag_pre.asp

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

so just specify what you want in your editor?

e.g.
<pre> text text <big><big>&Sigma;</big></big> text text </pre>

note: I'm not an expert

or how about this:
<pre> text text <span style="font-size: large;">&Sigma</span> text text
</pre>

 

[Gernot Frisch]

Not quite.

<pre>
1234
1<span>&sigma;</span>4
1234
</pre>

I want the lines stay the same height, and the sigma centered and the 4,4,4 exaclty in the same column. So, sigma should occupy
the space of two characters, centered.

 

[123Jim]

Not quite.

<pre>
1234
1<span>&sigma;</span>4
1234
</pre>

I want the lines stay the same height, and the sigma centered and the
4,4,4 exaclty in the same column. So, sigma should occupy the space of two
characters, centered.

have you tried something like this:
(Basically placing it in a <div> block and using padding by percentage in
the <span> to centre the greek character) not sureit will work for every
greek character.

<div style="display: inline; float: left; position: relative;">
<pre>1234<br>1<span
style="padding-right: 12%; padding-left:
12%;">s</span>4<br>1234<br>1234<br>1<span
style="padding-right: 12%; padding-left: 12%;">?</span>4<br>1234<br></pre>
</div>

 

[Jukka K. Korpela]

Not quite.

Please learn to quote on Usenet:
http://www.xs4all.nl/~wijnands/nnq/nquote.html

<pre>
1234
1<span>&sigma;</span>4
1234
</pre>

In most cases, <pre> element is a wrong approach. It means an escape from
HTML to plain text, and why would you do that?

So you should describe the original problem, in context, illustrated with a
URL.

I want the lines stay the same height, and the sigma centered and the
4,4,4 exaclty in the same column. So, sigma should occupy the space
of two characters, centered.

You want a rectangular circle then.

The <pre> element by definition renders all characters in a fixed size. It's
like a sequence of rows of boxes of identical size, each box containing one
character. What you are asking for is using two boxes to render one
character so that it's partly in one box, partly in another.

 

[123Jim]

have you tried something like this:
(Basically placing it in a <div> block and using padding by percentage in
the <span> to centre the greek character) not sureit will work for every
greek character.

<div style="display: inline; float: left; position: relative;">
<pre>1234<br>1<span
style="padding-right: 12%; padding-left:
12%;">s</span>4<br>1234<br>1234<br>1<span
style="padding-right: 12%; padding-left: 12%;">?</span>4<br>1234<br></pre>
</div>

ah .. on testing longer line of text .. percentage padding was not the best
....pixels is better ..
<div style="display: inline; float: left; position: relative;">
<pre>1234<br>1<span
style="padding-left: 4px; padding-right: 4px;">s</span>4<br>1234<br></pre>
</div>

 

[Jukka K. Korpela]

ah .. on testing longer line of text .. percentage padding was not
the best ...pixels is better ..

They are both foolish guesswork, and pixels are particularly foolish. I bet
you did not test your idea with a font size of 128px, for example.

 

[123Jim]

They are both foolish guesswork, and pixels are particularly foolish. I
bet you did not test your idea with a font size of 128px, for example.

Agreed, it is too easy to destroy but it works out in 'Courier new 13'
monospaced! even when the user wants to zoom in and out. If the user chooses
to change the text size rather than zoom (as they can in IE but not firefox
as far as I can see) we're all scr*wed

I look forward to seeing a better solution.

 

[Beauregard T. Shagnasty]

.. If the user chooses to change the text size rather than zoom (as
they can in IE but not firefox as far as I can see)

Firefox: View > Zoom > Zoom Text Only

 

[123Jim]

In message <[email protected]>



This is a terrible, TERRIBLE solution. For example, I don't use courier
as my mono-space font and I don't let sites override my fonts.

pre, code { font-family: Menlo; }

Get rid of the <pre> element completely and use real CSS to position the
text the way you want it.

Quite right, like below (although it relies on the default in the browser
for text size ):
<div
style="display: inline; float: left; position: relative; font-family:
monospace;">
1234567899876543<br>
1<span style="padding-left: 4px; padding-right:
4px;">&Psi;</span>456789<span
style="padding-left: 4px; padding-right: 4px;">&Omega;</span>12345<br>
1234
</div>

 

[123Jim]

Firefox: View > Zoom > Zoom Text Only

damn it! )
that makes life difficult

 

[Beauregard T. Shagnasty]

damn it! )
that makes life difficult

Not with a well-thought design... <g>

 

[Jenn]

For reasons Korpela explained, no can do.

You could use a little table and put colspan=2 and text-align: center on
the cell containing the sigma.

That's exactly what I would do, too, because it would work very easily.

 

[Neredbojias]

Not quite.

<pre>
1234
1<span>&sigma;</span>4
1234
</pre>

I want the lines stay the same height, and the sigma centered and the
4,4,4 exaclty in the same column. So, sigma should occupy the space
of two characters, centered.

I haven't tried this but here's what I *would* try;

1234
1<span class="a"><span class="b">23</span><span
class="c">&sigma;</span></span>4 1234

..a { position:relative;display:inline-block; }
..b { visibility:hidden; }
..c { display:block;text-align:center; }

 

[Neredbojias]

I haven't tried this but here's what I *would* try;

1234
1<span class="a"><span class="b">23</span><span
class="c">&sigma;</span></span>4 1234

.a { position:relative;display:inline-block; }
.b { visibility:hidden; }
.c { display:block;text-align:center; }

Okay, I did try it and left some things out:

<pre>
1234
1<span class="a"><span class="b">23</span><span class="c">&sigma;</span>
</span>4
1234
</pre>

..a { position:relative;display:inline-block; }
..b { visibility:hidden; }
..c { position:absolute;top:0;left:0;width:100%;display:block;text-
align:center; }

Seems to work...

 

[Neredbojias]

It puts the sigma in the second column, not centered in the space as
the OP wanted.

Not in my 5 browsers it doesn't! Ff 3.63, Ie8, and the latest Safari,
Chrome, and Opera all center it nicely here.

 

[123Jim]

Not in my 5 browsers it doesn't! Ff 3.63, Ie8, and the latest Safari,
Chrome, and Opera all center it nicely here.

--

It works here also and is unbroken when user changes text size, nice work.

Difficult to understand the code I find.
What is inline-block?
according to c3schools:
block "The element will generate a block box (a line break before and after
the element)"
inline "The element will generate an inline box (no line break before or
after the element). This is default"
inline-block "The element will generate a block box, laid out as an inline
box"

Sounds like it should be either inline or block. I see that only
inline-block works in your example, but how can it be both?

 

[Gernot Frisch]

That's very complicated.
I think I'll do a table and put each character in it's own cell then. That seems to be the most compatible solution.

 

[Mayeul]

It works here also and is unbroken when user changes text size, nice work.

Difficult to understand the code I find.
What is inline-block?
according to c3schools:
block "The element will generate a block box (a line break before and after
the element)"
inline "The element will generate an inline box (no line break before or
after the element). This is default"
inline-block "The element will generate a block box, laid out as an inline
box"

Sounds like it should be either inline or block. I see that only
inline-block works in your example, but how can it be both?

It is not both, it is a block.

A block that is laid out inline, the same way an <img> would, instead of
forcing sibling boxes to pile up and down to it.