Creative examples and best practices on Maxim citation design

Quotation marks are used as extracts of accent text. Because we need to provide some important flags to use the user's attention to the most important part of the article, although they never read it. In addition, quotes are always used in thank-you notes and sometimes in blog comments, and they may be styled with graphics, CSS, and a bit of JavaScript. Sometimes, creative dynamic solutions can also be applied well.

This post includes creative examples and best practices on Maxim citation design, and we've tried to mark out some common solutions and interesting ways, or it can be applied or expanded in your project.

Not all references are the same

First: Quote ≠ quote block ≠ maxim reference. Maxim quotes are short excerpts of introductory text. They are a piece of text that is used to pull readers out of their normal reading and give it a prominent place in posts and articles.

It is like a quote block (or, literally, a block reference) that is also detached from the body text as an area paragraph or block. However, they also refer to quotations that are not mentioned in the article, which are often placed in the reader's reading stream.

Finally, "normal" quotes refer to what is found in some other resource, and it is contained inside to support rather than dominate the content.

Blockquote\q\cite

According to the HTML rules, three elements are used to support semantic identity quotes, that is, <blockquote>, <q>, and <cite>. Although they can all identify references, they should be used in different contexts. So how do you use them (when do you use the logo)? The HTML Dog provides a good overview of these elements.

<blockquot>

BLOCKQUOTE is a large reference, and the content of this element must include block-level elements such as title, list <ul><ol>, paragraph <p> or Div. This element can also have an optional attribute cite (URL) to specify the URL to use to indicate where the reference came from. Example:

<blockquote cite= "http://www.htmldog.com/reference/htmltags/blockquote/" >

<p>a large quotation. The content of a BLOCKQUOTE element must include block-level elements such as headings, lists, paragraphs or div s.</p& Gt
<p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>

</blockquote>

<q>

Q is a small reference. The content of this element is an inline reference. Now the browser knows how to compile <q>, so you can use CSS to define the style of it. Example:
<p>bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

Although <q> is never used, it has some useful properties, for example, you can specify the appearance of quotes through <q> plus CSS. The reason is that different languages have different quotation marks. For example, these:
Q {}
Q {quotes: "" ""}
Q {quotes: "" "" "}

Now browsers support these ways, of course, IE (even IE8) does not support it, although we know how good it is. In some specific cases, it is sometimes only useful to provide numeric values because of some quotation mark coding problems.

By standard, you can specify the appearance of quotes, depending on the language of the browser used by the user. This is an example that appears to conform to the standards of the consortium.
: lang (FR) > Q {quotes: "" ""}
: lang (DE) > Q {quotes: "" "" "" \2039 "" \203a "}

Although they are so good, there are some inherent problems with quotes being placed in HTML content. Visually, browsers that support CSS may look very good, but for those that do not support CSS styles, plain HTML browsers, or screen readers of visually impaired users, quotes are not well represented in the main content, and a quote pops up between two paragraphs, which will give the reader a dew.

If you're using quotes, give users a little extra information on this error-prone issue. In the HTML code, you can provide some messages, such as using "start of Pull-quote" before quoting, and using "End Quote" when quoting the node speed. You can even provide a link navigation through which you can skip the quote to continue reading the main content.

<cite>

Cite defines an inline reference or points to another resource. Example:

And <cite>Bob</cite> said <q>no, I-I-it "s a banana</q>.</p>

Summary: Large quotes using BLOCKQUOTE, small quotes using Q, while pointing to the use of additional resources cite. In practice, blockquote and Q are more used.

Quote quotes and pictures of quotations to cherish.

Quotes, brackets, lines, dialog boxes, balloons-a designer has many ways to perform a beautiful and memorable quote. There are different solutions in color, form and size. Different technologies produce different results: One thing is important, however, is that for a visitor to quote is quoted, it is easier to master.

Looking at the example above,99designs uses a reference block to emphasize what this site is about. However, the words placed in quotation marks do not quote. We don't know why quotes can also be used in this case. Although we know that they should not be used in context.

1. Simple indentation

In most cases, the simple indentation is sufficient, in which case the structure of the content becomes clearer. However, in this way you need to make sure that there is a very intuitive layout, and visual level and indentation is not misunderstood. Often italics are used to indicate that the content is a quote, and sometimes the quote is centered. Of course, the latter approach is rarely used.

2. Quotes and indents

Another way to design maxim references is to use the quotation mark itself as a visual element to clearly indicate that the text passages are used to support something. This is the most popular one at the moment, and there is a good reason behind it: it conveys the meaning of chunks of text without ambiguity. Surprisingly, quotes are almost always placed on the left side of the quote. You can try to put quotes on the right side of the feeling, or put it underneath.