Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Add 'character count' #7

ricardozea opened this Issue · 6 comments

3 participants

Ricardo Zea John Wilson R'phael Spindel
Ricardo Zea


Although not an 'issue' per-se, it would be nice to be able to see how many characters per line there are, so one could use this feature during development only. Of course, this feature should be 'turned off' when going into production (just a thought since the script may need to execute some sort of function per line every time).

I haven't really thought of how to go about this since maybe counting characters per each single line may be too expensive resource-wise.

But maybe displaying an average of characters per line per paragraph in some sort of overlay on hover or something.

Anyway, just a way to be able to see at a glance how many characters per line there are.

This plugin rocks.


John Wilson

First of all, excellent idea! That would be extremely beneficial. I have also had a thought similar to this since I started making it. I'll explain my idea and then give my thoughts to both of our ideas.

My idea: FlowType could count the characters per line and give the user an option to specify how many characters they want per line. For example, if they set it to 60 characters per line, FlowType would count the average characters per line, then adjust the font-size to make it always 60 characters per line. Make sense?

A problem for both ideas: one of my initial worries was that each font is different, so how could you make sure that it stays at 60 characters per line, even if you change the font? If I'm not mistaken, I found a way to count the characters in jQuery, but the problem with that is it can't read per line—only per string.

The reason I explained all this is to ask if you might know of a better way? Seems like the issue starts with actually being able to count the characters per line instead of per string.

Ricardo Zea

Hello John,

Well, I'm not a JavaScript expert so I can't answer that question technically.

So I'll try to share more insight from a process and usage view.

Although I understand your concern (and maybe I'm not completely following the issue you're describing) I don't think it really applies.

Because no matter what font family I (or anyone) use for paragraphs, initially I have to make adjustments on the script in order to get the desired number of characters per line. If I change the font, then I will need to go back and adjust the script again.

So, for example: If you used Tahoma for your paragraphs, then you'd adjust the script to make the font size the right size to get 60 characters per line.

But then, two weeks later I decide to use Lucida Grande instead. I may get either more or less 60 characters per line (and maybe not too much either way) but if I still want 60 characters per line, then I would have to go back and adjust the script again to fit the amount of characters I want.

In other words, the only way I see your issue happening is if the font family is changed on the fly and I don't think someone in their right mind would create such feature on their application, if they did then it would defeat the whole purpose of using FlowType.js in the first place.

Makes sense?

Another thing to consider is the fact that the script can't be so restrictive, meaning: If I want to have 60 characters per line the number "60" is an "estimate" and not a "fixed" number. So, some lines may get 58 characters, some 62, some 60, some 64, and so on. And that is totally fine.

Ricardo Zea

I've been thinking about this a bit more and I think that having an exact character count per line is unnecessary.

I created a local exercise of this and came to the conclusion that all I needed was a way to know the average of characters per line in a given element.

For example, in a paragraph, if there was a way for the script to show something like: <p>: Average characters per line: 55.. As long as you have your character count within the recommended range, which is pretty big if you ask me (45 to 75), that should be enough.

In reality you wouldn't really need to have EXACTLY 48 characters per line (for example) because no matter what, in some lines you're going to have more and in others, less.

So, again, being able to see the average I think is enough. You can then tweak here and there to get to a desired average always considering the recommended range.

Not sure if this solves the "string" issue you mentioned above or not though.

What do you think?

John Wilson

I totally agree with what you are saying and I believe we are on the same page—a specific amount of characters per line is irrational, but an average would be very helpful. Where I'm getting caught up is in the execution of the code for this feature. At this point, jQuery doesn't natively include a feature (that I know of) that could make this happen. Thus, we would need to dramatically increase the file size to write javascript that would support this—which leads me to think that it's not totally worth it.

Those are just my thoughts. Perhaps someone who is more experienced in actual javascript could help make this happen.

Ricardo Zea

Although I don't know how much work this would entail, could this feature be then created as a plugin/addon instead? After all, this is only for development purposes, is not something you would want to include in production since it's irrelevant for that stage of the workflow.

What do you think?

R'phael Spindel

This SO answer provides a reasonable means to calculate average letters per line:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.