Often in a hurry when adding materials to the site or, for example, creating a new topic on the forum, the user can start writing a sentence (title) with a small (lowercase) letter. This is to some extent a mistake.

I'll show you several options for solving this problem: PHP and CSS are more suitable for already published materials, when how jQuery can fix the situation even before publication.

The first letter of a string is uppercase in PHP

In PHP there is a function called “ ucfirst", Which just converts the first character of the string to uppercase, but its minus is that it does not quite work correctly with Cyrillic.

For this, we will write our own small function. The implementation will look like this:

In this version, we will receive a sentence that begins with a capital letter, which, in fact, is what we need.

Uppercase first letter of string in CSS

This method visually (that is, in the source code of the site, the offers will appear as is) also converts the first character to uppercase.

Usage is as follows:

Using the pseudo-element " first-letter"And properties" text-transform»We have set the appearance for each first letter of the paragraph.

JQuery uppercase first letter of string

As I said earlier, this conversion method is best for materials that are yet to be published.

For example, we will take a text field (it will act as a field for entering a title for us) and write a small script for it that, when entering a sentence with a lowercase letter, makes it with a capitalization:

The script works both when writing text and simply pasting it. Do not forget that for the scripts to work on your site, you must have the jQuery library connected.

Controls the conversion of element text to uppercase or lowercase characters. When the value is other than none, the case of the source text will be changed.

brief information

Designations

The values

capitalize The first character of each word in the sentence will be capitalized. The rest of the symbols do not change their appearance. lowercase All text characters become lowercase (lowercase). uppercase All text characters are uppercase (uppercase). none Does not change case.

Sandbox

Winnie the Pooh was always not averse to a little refreshment, especially at eleven o'clock in the morning, because at this time breakfast had long since ended, and dinner had not even thought to begin. And, of course, he was terribly happy to see Rabbit taking out cups and plates.

div (text-transform: capitalize;)

Example

Cultural monument of the Middle Ages

The Amazonian lowlands take on a small transport of cats and dogs, and Hayosh Bay is famous for its red wines.

The result of this example is shown in Fig. 1.

Figure: 1. Applying the text-transform property

Object Model

An object.style.textTransform

Specification

Each specification goes through several stages of approval.

• Recommendation - This specification is endorsed by the W3C and recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it is in line with its objectives, but the help of the developer community is required to implement the standard.
• Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of the draft after discussion and revision for community review.
• Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
• Draft ( Draft specification) is the first draft of the standard.

Allows you to change the case of the letters of the text.

The default value is none, which has no effect on the text. The case of the text remains the same. The uppercase and lowercase values \u200b\u200bconvert characters to upper and lower case, respectively. If you specify a capitalize value, then only the first characters of each word will be capitalized. Inherit inherits the value from the parent.

Example

This is the title. It has a text-transform property set to uppercase. All characters will be uppercase.

This paragraph has a Text-transform Property with a Value of Lowercase, which means all letters will be in lowercase.

And this last paragraph has a text-transform property with a CAPITALIZE property applied. The first letters of each word will be uppercase, and only that.

Result

However, not all so simple. There are some nuances. If you pay attention to the second paragraph of the above example, you will notice that the word capitalize, despite the text-transform property applied to the paragraph with the capitalize value, is rendered entirely in capital letters, which corresponds to the original text. This is explained by the fact that with the specified capitalize value, only the first letters of the words are checked, and the rest remain unchanged, regardless of their initial state.
Despite its seeming simplicity, the text-transform property can be very useful. For example, to capitalize the text of all H1 headings on your site, you just need to add one property to your stylesheet

H1 (text-transform: uppercase;)

and the problem will be solved. And you don't need to manually change all the headers, which can be very, very many.

CSS capital letters help to break the monotony of a uniform design, the texts of which look the same from start to finish.

Earlier and now drop caps

The chroniclers used capital letters in handwritten manuscripts, some of which date back to the 5th century. Uppercase letters continued to be used from the 8th to the 15th century, when the printing press allowed printing to be industrialized. Both handwritten and printed drop caps were placed at the beginning of the text. They were often decorated with a decorative pattern that was placed around the letter.

Raised and lowered letters are still in use today. They can be found in newspapers, magazines and books, as well as in digital printing. Raised letters are sometimes referred to as extended. They are placed flush with the bottom of the text that follows them. Omitted letters are placed flush with the top of the text, sometimes in a layer behind the main body of text content, or the rest of the text flows around them.

The raised letters are much easier to define, because they are flush with the rest of the text, and usually you do not need to change the flow around the outer margins to do this. Omitted letters require more fine tuning. It will be easier for you to sort this out if you first understand how raised characters are handled.

Using classes

Designers who are already familiar with CSS know to create a separate CSS class for the first capital letter.

The CSS for the paragraph element and the class that creates the letter would look like this:

p (font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size: 48px; font-family: Didot;)

And the HTML code will look like this:

Which gives us:

Seems too easy? In fact, you will have to make adjustments based on the specific raised letters, as each capital letter requires special kerning. After choosing a font for the raised letters and for the body text, you need to create separate classes for each raised letter. In the below CSS class.myinitialcapsi the box on the right is negative to decrease the distance between I and n.

Myinitialcapsi (font-size: 48px; font-family: Didot; margin-right: -1px;)

In this case, there’s some extra space between the “I” and “n.”

Including a new class with a negative margin pulls it closer.

Depending on the screen resolution in the above example, I and n may look like they have merged together. This is due to the serifs at the ends of the letters. Therefore, before deciding on the final CSS styles, test the site on various devices to see how the text in all uppercase CSS looks on them.

Quotes and other special cases

You can enlarge not only the letters at the beginning of the text. You can implement another class to create a larger version of the quotation marks that appear next to the letter. In our case, neither the 48 letter class nor the 20 pixel text class is suitable for quotation marks. Rather, it will be something in between - 30 pixels. We'll move the quotes down 4 pixels to optically align them with I:

Myinitialcapsq (font-size: 30px; font-family: Didot; float: left; margin-top: 4px;)

“Including ”a new class with a negative margin pulls it closer.

You need to be very careful about specifying each of the CSS caps, along with the quotes, so that their kerning and alignment match the surrounding markup. For example, the letter T will need to be shifted to the left, slightly beyond the edge of the paragraph, so that its transverse line visually fits into the layout. You will need to do the same with round letters such as C, G, O and Q. In this example, the font sizes used are 20, 30 and 48. But you will need to choose the sizes based on the specifics of the fonts you have chosen. As well as the sizes and resolutions of the screens on which the site will be viewed.

Pseudo-elements and pseudo-classes

With a CSS pseudo-element, you can easily create a raised letter by adding :: first-letter to the paragraph element. Use: first-letter ( with one colon) for outdated browsers:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 1.2em;) p :: first-letter (font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 em;)

The HTML code that contains the CSS classes that take into account the kerning of the letters N and B will look like this ...

An inital letter, with the first letter being a capital letter.
With a line break, the next line has no initial cap.

notice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?

But with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?

The first capital letter of the paragraph is converted to a letter.
The first letter after a line break will not be capitalized.

aboutNote that in the HTML source, the first letter is not capitalized, but it is converted to a 3.6em character.

ABOUTHowever, even after a forced line break, and at the beginning of each new paragraph, a letter is always created. You might ask yourself: How can I take this into account? Do I need to add letters for all of these cases? Well, you can. But is it necessary?

Even with the benefits that pseudo-elements provide, we had to add a lot of code to define separate classes to handle kerning and indentation issues. But this method converts the first letter of every new paragraph to CSS a capital letter. For some, it may not work, because you do not need to transform the first letter of each paragraph.

Combining pseudo-classes and pseudo-elements to create a smart layout

Adding the: first-child pseudo-class helps solve the problem of unnecessary conversion of first letters:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 0.5em;) p: first-child :: first-letter ( font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;)

Combining this code with HTML:

The first letter, which is defined as first-child, is the only letter that is converted to the raised drop cap in this method.

Since only the letter defined as first-child is converted, note that this example differs from the previous one, without first-child. In addition, we do not convert the first letters after the beginning of a paragraph and after a forced line break. This looks more elegant than what the layout looked like when we converted all the first letters of the paragraphs.

The advantage of using pseudo-classes is the ability to handle various special cases. What about the downsides? There are many different pseudo-classes, and they can be combined in so many ways that it can make your head spin. For example, the pseudo-classes: first-child and: first-of-type can give the same results. You can also apply the pseudo-class not only to a paragraph, but also to elements