Grammar With CSS

In a stack of papers called Technology.

  • Apr
  • 03
  • 2006

Here’s the example:
Punctuation and Capitalization Practice
I’ve typed something into a text file (saved as “text.txt”). I want the contents of that file as a variable in a PHP script so I can do some STR_REPLACE action to it, specifically so I can wrap all punctuation in SPAN tags. Surely, you can help me. Though I may stumble across the solution in a few days, you know how to do it now. Leave me a comment and tell me how.

But Why??

If we use a little bit of CSS, any paragraph can easily be stripped of all capitalization and all punctuation with the click of a button. And it can all be added back again, just as easily. Oh, and teachers would only have to type out the paragraph a single time, correctly.

I started thinking about the times we teachers put our students through grammar exercises like this: here’s a paragraph without any punctuation or capitalization; correct it. The thought is that this builds an awareness of the importance of punctuation. The typical example is something like, “wake up tom jones is at the door” where the meaning of the sentence changes significantly depending on where you put the comma (is Tom Jones at the door? Am I waking Tom because Jones is here?). Actually, I’ve never seen that example before, but it works to illustrate the point.

I think this exercise could be a good reminder to many students, not just the English Language Learner (ELL) students that are frequently subjected to this kind of assignment. If it’s easy for the teacher to put in place, why not add it to the ever-growing bag-of-tricks, eh? And if it’s really easy, I could type up (or copy and past) a few paragraphs from the current reading and use that as the basic text for the exercise, thereby moving students along in their reading and giving them practice at the same time.

There’s another site that does something similar to what I want. But what I want doesn’t involve javascript, forms, or text boxes, although it could on the teacher administration side of things. No. What I want is easily customized. What I want is a very simple page, listing a few different paragraphs for practicing punctuation and capitalization. What I want might have a textbox for students to type their response, but it just as easily might not. And what I want to do uses CSS to do things for us.

Here’s the idea in a nutshell: you type out your paragraph and apply “text-transform: lowercase;” to take care of all capitalization within a paragraph. Then, by wrapping all punctuation in SPAN tags, use “display: none;” to hide all punctuation.

What I need your help with is a way to build a script that will open up my text (saved as “text.txt”) and run it through a filter to add SPAN tags around all punctuation. I’ve got the ARRAYs built for all punctuation, but I’m having trouble setting up the script to open up the TXT file, run it through, then display the text.

I’d just use a style switcher to turn back on capitalization and punctuation to check answers. Here’s what I thought might have worked, but clearly does not:

// open my file where I've carefully typed my original, punctuated, capitalized paragraph

// an array of all punctuation marks I want to wrap in SPAN tags
$punct = array('.', ',', '!', ';', '?', '"');
$punctspan = array('.', ',', '!', ';', '?', '\"');

// find all punctuation and wrap those marks in SPAN tags for easy hiding later
$newtext = str_replace($punct, $punctspan, $text);

// when I call up this script, it'll do all that and display the finished result
echo $newtext;


I’m working on creating a list of all the little scripts I use to make my life much easier and this could make it onto that list. But only if you help me figure out how to get the script to parse the content of “text.txt,” run it through the STR_REPLACE function I have above, and spit out the resulting paragraph, with all punctuation wrapped in SPAN tags.

I’m sure it’s something really easy, really obvious, and even something working in another script I use all the time. Looking around everything that I have running is on the agenda for tonight, but maybe you can help me get there quicker.


1. Debbie says:

[4/4/2006 - 8:52 pm]

Todd, from my husband:

Your variable $text isn’t actually the text, it’s just a file handle. You need to use fread() to get the contents of the text file into a variable — the docs are here:

I think the str_replace() call is okay; have you tested with just a bare string instead of the file contents?

2. Todd says:

[4/5/2006 - 5:00 pm]

Combining that with the page on nl2br, I finally did it. I knew it was something simple. Thanks.

I also used a tutorial on creating an international encyclopedia to add a call for wrapping all capital letters in SPAN tags, too. Wrapping things in those SPAN tags means that we can target them for specific formatting with CSS later. Now I have punctuation and capitalization in wrappings that I can style later. When turning each one on, I’ll make them larger and differently colored than the other text on the page.

I’ve put this script online and you’re welcome to it. Right now, only the file “text.txt” will be read. A few more things happened to it that make it more useful. There are limitations on all this, but the basic idea is there. If you do something cool with this, post back to let me know.