text span 2 characters (fixed font width)

Discussion in 'HTML' started by Gernot Frisch, May 5, 2010.

  1. Hi,

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

    --
    ------------------------------------
    Gernot Frisch
    http://www.glbasic.com
    Gernot Frisch, May 5, 2010
    #1
    1. Advertising

  2. Gernot Frisch

    123Jim Guest

    "Gernot Frisch" <> wrote in message
    news:...
    >
    > 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, May 5, 2010
    #2
    1. Advertising

  3. Gernot Frisch

    123Jim Guest

    "123Jim" <> wrote in message
    news:hrrfmn$dom$-september.org...
    >
    > "Gernot Frisch" <> wrote in message
    > news:...
    >>
    >> 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
    >


    or how about this:
    <pre> text text <span style="font-size: large;">&Sigma</span> text text
    </pre>
    123Jim, May 5, 2010
    #3
  4. 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.
    Gernot Frisch, May 5, 2010
    #4
  5. Gernot Frisch

    123Jim Guest

    "Gernot Frisch" <> wrote in message
    news:...
    > 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>
    123Jim, May 5, 2010
    #5
  6. Gernot Frisch wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 5, 2010
    #6
  7. Gernot Frisch

    123Jim Guest

    "123Jim" <> wrote in message
    news:hrrvtq$fdp$-september.org...
    >
    > "Gernot Frisch" <> wrote in message
    > news:...
    >> 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>
    >


    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>
    123Jim, May 5, 2010
    #7
  8. 123Jim wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 5, 2010
    #8
  9. Gernot Frisch

    123Jim Guest

    "Jukka K. Korpela" <> wrote in message
    news:skgEn.4661$...
    > 123Jim wrote:
    >
    >> 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.
    >


    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.
    123Jim, May 5, 2010
    #9
  10. 123Jim wrote:

    > .. 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

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
    Beauregard T. Shagnasty, May 5, 2010
    #10
  11. Gernot Frisch

    123Jim Guest

    "Lewis" <> wrote in message
    news:...
    > In message <hrs65q$68t$-september.org>
    > 123Jim <> wrote:
    >
    >> "Jukka K. Korpela" <> wrote in message
    >> news:skgEn.4661$...
    >>> 123Jim wrote:
    >>>
    >>>> 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.
    >>>

    >
    >> 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 :)

    >
    > 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, May 5, 2010
    #11
  12. Gernot Frisch

    123Jim Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:hrsjbs$eu$-september.org...
    > 123Jim wrote:
    >
    >> .. 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
    >



    damn it! :))
    that makes life difficult
    123Jim, May 5, 2010
    #12
  13. 123Jim wrote:

    > "Beauregard T. Shagnasty" wrote:
    >> 123Jim wrote:
    >>> .. 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

    >
    > damn it! :))
    > that makes life difficult


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

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
    Beauregard T. Shagnasty, May 5, 2010
    #13
  14. Gernot Frisch

    Jenn Guest

    "Ben C" <> wrote in message
    news:...
    > On 2010-05-05, Gernot Frisch <> wrote:
    >> 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.

    >
    > 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.

    --
    Jenn (from Oklahoma)
    Jenn, May 6, 2010
    #14
  15. Gernot Frisch

    Neredbojias Guest

    On 05 May 2010, "Gernot Frisch" <> wrote:

    > 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

    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, May 6, 2010
    #15
  16. Gernot Frisch

    Neredbojias Guest

    On 05 May 2010, Neredbojias <> wrote:

    > On 05 May 2010, "Gernot Frisch" <> wrote:
    >
    >> 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; }


    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

    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, May 6, 2010
    #16
  17. Gernot Frisch

    Neredbojias Guest

    On 05 May 2010, Lewis <> wrote:

    > In message <>
    > Neredbojias <> wrote:
    >> <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...

    >
    > 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.

    --
    Neredbojias

    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, May 6, 2010
    #17
  18. Gernot Frisch

    123Jim Guest

    "Neredbojias" <> wrote in message
    news:...
    > On 05 May 2010, Lewis <> wrote:
    >
    >> In message <>
    >> Neredbojias <> wrote:
    >>> <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...

    >>
    >> 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.
    >
    > --


    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?
    123Jim, May 6, 2010
    #18

  19. >>>> <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; }


    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.
    Gernot Frisch, May 6, 2010
    #19
  20. Gernot Frisch

    Mayeul Guest

    123Jim wrote:
    > 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.

    --
    Mayeul
    Mayeul, May 6, 2010
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. johnp
    Replies:
    4
    Views:
    3,655
    Toby Inkster
    May 23, 2005
  2. mttc
    Replies:
    2
    Views:
    2,368
    Roedy Green
    Jul 3, 2009
  3. Stéphane Klein
    Replies:
    2
    Views:
    1,736
    John Nagle
    Mar 30, 2010
  4. Stefan Behnel
    Replies:
    0
    Views:
    475
    Stefan Behnel
    Mar 29, 2010
  5. Wang, Jay
    Replies:
    5
    Views:
    458
    Wang, Jay
    May 25, 2004
Loading...

Share This Page