Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. The Lounge
  3. word wrapping

word wrapping

Scheduled Pinned Locked Moved The Lounge
htmlcssquestion
60 Posts 20 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H honey the codewitch

    It's for a e-reader for reading books. I can't do that. :(

    Real programmers use butterflies

    L Offline
    L Offline
    Lost User
    wrote on last edited by
    #14

    Start a dictionary ... you already have a word. I have spelling tables with up to 70,000 entries; you can manage one word? ;P

    It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it. ― Confucian Analects: Rules of Confucius about his food

    H 1 Reply Last reply
    0
    • L Lost User

      Start a dictionary ... you already have a word. I have spelling tables with up to 70,000 entries; you can manage one word? ;P

      It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it. ― Confucian Analects: Rules of Confucius about his food

      H Offline
      H Offline
      honey the codewitch
      wrote on last edited by
      #15

      I don't have the space for a dictionary. I just don't. I'm sweating 30kB here 30kB there for my state tables, and then I have 250kB for my default fonts, which i actually have zipped, and then embedded the compressed result into my code as a C array. But I don't have room left over for much. Edit: I think I'm just going to hard wrap

      Real programmers use butterflies

      1 Reply Last reply
      0
      • H honey the codewitch

        So you'd just split, like in the middle of the word, or at least, as far as the text goes on the screen and then wrap to the next line? I suppose that makes sense.

        Real programmers use butterflies

        P Offline
        P Offline
        PIEBALDconsult
        wrote on last edited by
        #16

        --------------------
        Well, I'd split on a
        ​space if ​possible,
        but that isn't
        always possible,
        particularly with
        "supercalifragilisti
        cexpialidocious",
        which exceeds the
        line length all on
        its own.

        D S 2 Replies Last reply
        0
        • H honey the codewitch

          Say I don't have room to wrap a single world like supercalifragilisticexpialidocious. In the real world, I'd just find a syllable and then hyphenate. I don't think I can do that - and i don't think i *should* do that in html and css. I don't know *what* to do. What would you do?

          Real programmers use butterflies

          Kornfeld Eliyahu PeterK Offline
          Kornfeld Eliyahu PeterK Offline
          Kornfeld Eliyahu Peter
          wrote on last edited by
          #17

          As you are already neck-deep into CSS you should learn from it...

          word-break: break-all;
          To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

          "The only place where Success comes before Work is in the dictionary." Vidal Sassoon, 1928 - 2012

          "It never ceases to amaze me that a spacecraft launched in 1977 can be fixed remotely from Earth." ― Brian Cox

          1 Reply Last reply
          0
          • H honey the codewitch

            Say I don't have room to wrap a single world like supercalifragilisticexpialidocious. In the real world, I'd just find a syllable and then hyphenate. I don't think I can do that - and i don't think i *should* do that in html and css. I don't know *what* to do. What would you do?

            Real programmers use butterflies

            R Offline
            R Offline
            Rage
            wrote on last edited by
            #18

            honey the codewitch wrote:

            In the real world, I'd just find a syllable and then hyphenate

            What about hyphenating at random places :-) ? How often do you need it ?

            Do not escape reality : improve reality !

            H 1 Reply Last reply
            0
            • H honey the codewitch

              Say I don't have room to wrap a single world like supercalifragilisticexpialidocious. In the real world, I'd just find a syllable and then hyphenate. I don't think I can do that - and i don't think i *should* do that in html and css. I don't know *what* to do. What would you do?

              Real programmers use butterflies

              U Offline
              U Offline
              User 13269747
              wrote on last edited by
              #19

              The browser rendering engine already has good support for splitting words. I put "hypens: auto;" into my CSS and I am quite pleased with the result. [edit]: My css is as follows (lookup the hyphenate styles for what they do)

              body {
              font-family: 'Computer Modern Serif';
              margin: 40px auto;
              max-width: 640px;
              line-height: 1.6;
              font-size: 16px;
              padding: 0 10px;
              hyphens: auto;
              hyphenate-limit-lines: 2;
              hyphenate-limit-chars: 6 3 2;
              text-indent: 30px;
              }

              H 1 Reply Last reply
              0
              • H honey the codewitch

                It's for a e-reader for reading books. I can't do that. :(

                Real programmers use butterflies

                U Offline
                U Offline
                User 13269747
                wrote on last edited by
                #20

                Disregard my pevious answer - that's for HTML only. If it's for an e-reader you have bigger problems: use a library to do this because there are multiple things involved in flowing text. If you've never used LaTeX you are probably not familiar with all the complexities involved: 1. Font kerning: changes the width of a line. 2. Inter-word spacing: algorithm must ensure no rivers run through paragraphs and edges line up. 3. Paragraph indentation: in literary prose all paragraphs have an indentation. 4. Long word wrapping: You need to use a table of pre-calculated breakpoints that are specific to a glyph. 5. Language: Some languages read right-to-left, and these may be in the middle of a sentence in a language which reads left-to-right. If you're implementing an E-reader then you need to know all of the following concepts: 1. Kerning 2. Ligatures 3. Unicode code-points 4. Unicode BMP 5. Unicode surrogates 6. Unicode characters 7. Unicode glyphs 8. Rivers/runs in text 9. Struts and rules in text 10. Baselines, Caplines 11. Ascenders, descenders 12. Subpixels ... and probably a hundred other typesetting things I forgot or don't know about. Flowing text for an E-reader (or PDF, or book or any typesetting) is an entire Phd topic on its own and can take years of work to implement. It does help if you've used LaTeX in the past, because it chooses good defaults for all of the above, and if you want to change anything you're forced to learn what all those things mean.

                H C 2 Replies Last reply
                0
                • H honey the codewitch

                  Say I don't have room to wrap a single world like supercalifragilisticexpialidocious. In the real world, I'd just find a syllable and then hyphenate. I don't think I can do that - and i don't think i *should* do that in html and css. I don't know *what* to do. What would you do?

                  Real programmers use butterflies

                  Y Offline
                  Y Offline
                  YahiaEQ
                  wrote on last edited by
                  #21

                  CSS schould do the trick automatically, see https://medium.com/clear-left-thinking/all-you-need-to-know-about-hyphenation-in-css-2baee2d89179

                  H 1 Reply Last reply
                  0
                  • Y YahiaEQ

                    CSS schould do the trick automatically, see https://medium.com/clear-left-thinking/all-you-need-to-know-about-hyphenation-in-css-2baee2d89179

                    H Offline
                    H Offline
                    honey the codewitch
                    wrote on last edited by
                    #22

                    Oh, so you're volunteering to write the CSS engine for me right?

                    Real programmers use butterflies

                    Y 1 Reply Last reply
                    0
                    • U User 13269747

                      The browser rendering engine already has good support for splitting words. I put "hypens: auto;" into my CSS and I am quite pleased with the result. [edit]: My css is as follows (lookup the hyphenate styles for what they do)

                      body {
                      font-family: 'Computer Modern Serif';
                      margin: 40px auto;
                      max-width: 640px;
                      line-height: 1.6;
                      font-size: 16px;
                      padding: 0 10px;
                      hyphens: auto;
                      hyphenate-limit-lines: 2;
                      hyphenate-limit-chars: 6 3 2;
                      text-indent: 30px;
                      }

                      H Offline
                      H Offline
                      honey the codewitch
                      wrote on last edited by
                      #23

                      Wouldn't that be great if I didn't have to implement my own web browser which is the whole point of this?

                      Real programmers use butterflies

                      U 1 Reply Last reply
                      0
                      • H honey the codewitch

                        Oh, so you're volunteering to write the CSS engine for me right?

                        Real programmers use butterflies

                        Y Offline
                        Y Offline
                        YahiaEQ
                        wrote on last edited by
                        #24

                        Totally - since CSS engines are my bread and butter... not really, I just thought EPUB displays content using something that is capable of CSS...

                        H 1 Reply Last reply
                        0
                        • R Rage

                          honey the codewitch wrote:

                          In the real world, I'd just find a syllable and then hyphenate

                          What about hyphenating at random places :-) ? How often do you need it ?

                          Do not escape reality : improve reality !

                          H Offline
                          H Offline
                          honey the codewitch
                          wrote on last edited by
                          #25

                          I'm not sure. It depends on the size of the screen that's connected to the e-reader I'm making. It can use any size screen, though in the end I'll be settling on a 600x800 epaper display

                          Real programmers use butterflies

                          1 Reply Last reply
                          0
                          • H honey the codewitch

                            Wouldn't that be great if I didn't have to implement my own web browser which is the whole point of this?

                            Real programmers use butterflies

                            U Offline
                            U Offline
                            User 13269747
                            wrote on last edited by
                            #26

                            Quote:

                            Wouldn't that be great if I didn't have to implement my own web browser which is the whole point of this?

                            Well, your initial message didn't specify that as a point and my crystal ball isn't working today :-) But, isn't it great that I gave you a really nice introduction into the complexities of your problem over here: The Lounge[^]?

                            H 1 Reply Last reply
                            0
                            • Y YahiaEQ

                              Totally - since CSS engines are my bread and butter... not really, I just thought EPUB displays content using something that is capable of CSS...

                              H Offline
                              H Offline
                              honey the codewitch
                              wrote on last edited by
                              #27

                              Yes, it does. I wish it didn't. I'm making an epub reader on a device that can't even run a basic web browser.

                              Real programmers use butterflies

                              Y 1 Reply Last reply
                              0
                              • U User 13269747

                                Disregard my pevious answer - that's for HTML only. If it's for an e-reader you have bigger problems: use a library to do this because there are multiple things involved in flowing text. If you've never used LaTeX you are probably not familiar with all the complexities involved: 1. Font kerning: changes the width of a line. 2. Inter-word spacing: algorithm must ensure no rivers run through paragraphs and edges line up. 3. Paragraph indentation: in literary prose all paragraphs have an indentation. 4. Long word wrapping: You need to use a table of pre-calculated breakpoints that are specific to a glyph. 5. Language: Some languages read right-to-left, and these may be in the middle of a sentence in a language which reads left-to-right. If you're implementing an E-reader then you need to know all of the following concepts: 1. Kerning 2. Ligatures 3. Unicode code-points 4. Unicode BMP 5. Unicode surrogates 6. Unicode characters 7. Unicode glyphs 8. Rivers/runs in text 9. Struts and rules in text 10. Baselines, Caplines 11. Ascenders, descenders 12. Subpixels ... and probably a hundred other typesetting things I forgot or don't know about. Flowing text for an E-reader (or PDF, or book or any typesetting) is an entire Phd topic on its own and can take years of work to implement. It does help if you've used LaTeX in the past, because it chooses good defaults for all of the above, and if you want to change anything you're forced to learn what all those things mean.

                                H Offline
                                H Offline
                                honey the codewitch
                                wrote on last edited by
                                #28

                                Find me a library for this that works on the Arduino framework. 1. Done 2. Not 3. Done 4. Not 5. Done 6. Done 7. Done (although i think you mean ttf/otf glyphs 8. Not 9. Not 10.Done 11.I don't know what that is 12. If you mean fractional pixels or anti-aliasing, done

                                Real programmers use butterflies

                                U R 2 Replies Last reply
                                0
                                • U User 13269747

                                  Quote:

                                  Wouldn't that be great if I didn't have to implement my own web browser which is the whole point of this?

                                  Well, your initial message didn't specify that as a point and my crystal ball isn't working today :-) But, isn't it great that I gave you a really nice introduction into the complexities of your problem over here: The Lounge[^]?

                                  H Offline
                                  H Offline
                                  honey the codewitch
                                  wrote on last edited by
                                  #29

                                  I also didn't say I was using a web browser. It's weird that you would assume I was. C# is the most commonly used language at CP, not HTML and CSS.

                                  Real programmers use butterflies

                                  1 Reply Last reply
                                  0
                                  • H honey the codewitch

                                    Yes, it does. I wish it didn't. I'm making an epub reader on a device that can't even run a basic web browser.

                                    Real programmers use butterflies

                                    Y Offline
                                    Y Offline
                                    YahiaEQ
                                    wrote on last edited by
                                    #30

                                    Do you know https://github.com/litehtml/litehtml ? this not a browser but just a parser for html and CSS... perhaps this can help...

                                    H 1 Reply Last reply
                                    0
                                    • Y YahiaEQ

                                      Do you know https://github.com/litehtml/litehtml ? this not a browser but just a parser for html and CSS... perhaps this can help...

                                      H Offline
                                      H Offline
                                      honey the codewitch
                                      wrote on last edited by
                                      #31

                                      I've got a parser, and that uses the STL and I cannot rely on the STL being available. :)

                                      Real programmers use butterflies

                                      1 Reply Last reply
                                      0
                                      • H honey the codewitch

                                        Find me a library for this that works on the Arduino framework. 1. Done 2. Not 3. Done 4. Not 5. Done 6. Done 7. Done (although i think you mean ttf/otf glyphs 8. Not 9. Not 10.Done 11.I don't know what that is 12. If you mean fractional pixels or anti-aliasing, done

                                        Real programmers use butterflies

                                        U Offline
                                        U Offline
                                        User 13269747
                                        wrote on last edited by
                                        #32

                                        Quote:

                                        Find me a library for this that works on the Arduino framework.

                                        Maybe you should tell your client that the project they contracted you for is not completely realisable on their choice of hardware. Sure, you can get part of the way there on an atmega platform but it may not match their expectations. Or maybe get them to scale their requirements down to exclude extended unicode characters and exclude any sort of typesetting rules; just render text instead of typesetting it. Most (if not all) times my clients let me choose the hardware anyway (they set price restrictions and I tell them what is capable at that price) so it shouldn't really be a problem having this discussion with your client.

                                        H 1 Reply Last reply
                                        0
                                        • H honey the codewitch

                                          Say I don't have room to wrap a single world like supercalifragilisticexpialidocious. In the real world, I'd just find a syllable and then hyphenate. I don't think I can do that - and i don't think i *should* do that in html and css. I don't know *what* to do. What would you do?

                                          Real programmers use butterflies

                                          M Offline
                                          M Offline
                                          Marc Clifton
                                          wrote on last edited by
                                          #33

                                          Scrollbars! :laugh:

                                          Latest Articles:
                                          DivWindow: Size, drag, minimize, and maximize floating windows with layout persistence

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • World
                                          • Users
                                          • Groups