Reminder on the basic layout of the article for Habra without the use of Markdown markup
On Habre, by the standards of the old-timers, I recently, just two years, but actively write, if possible every day. Now, reading articles, and just scrolling through the feed of fresh publications on habré, and on GT, I understand that many just can't cope with the layout of the text and, as a consequence, quite often fit the publication are buried by their authors due to unreadable text. Or discourages curve KDPW, or something will happen.
It is possible for experienced authors seem to post captain, petty, or even how, because the main content, but for those who want to pass the sandbox and join in Habra-community, I am sure it will help not only to write something useful, but also beautiful your work to present.
It just so happened that the entire tape Habrahabr left-aligned. For this reason, experienced authors leave a small image on the left or use pictures with width in 800-1000 px. Separately I want to note that almost the best is the ratio of KDPW 2: 1, i.e. image 800х400 px. Such proportion allows social media Manager social. networking not izgalyatsya with your picture (if not look for something more appropriate in size), and use the original without violating the author's ideas.
Even if your image has a smaller aspect ratio, for example, 800х700, try to reduce its height. The critical threshold is 500-600px except in exceptional cases, when KDPW and in truth "pulls" or contains useful information (screenshots of the interface, for example). It's all quite prosaic: not everyone has a monitor with a resolution of 1920x1080 and, for example, a user of a laptop with a maximum screen resolution of 1366x768 just do not appreciate all these beauties KDPW with size 1000x1000. But even in the case where the picture carries a payload in the form of text, for example, you can make it clickable, so everything will be easier.
Due to the fact that the images are seldom more than 500-800 pixels wide, everyone is trying to use left alignment. And you try, I'll explain why.
When the user scrolled tape articles, his focus shifted to the left side of the tape, at the beginning of headings, a list of hubs and buttons for voting. If you take a picture of small size in the center, or, God forbid, right, you're making a cheap marketing gimmick, "we don't like it and attract the reader's attention through annoying factors." In fact, such methods usually end up sad for the authors.
I will give an example based on my old article.
The correct location of the KDPW:
Incorrect location KDPW:
Very wrong location KDPW:
Okay, that picture we understand. 2 to 1, not wider than 1000 px, left aligned. But if the picture is narrow, but appropriate to the text? What to do? To use the wrap, certainly. Here it was broken a lot of copies (such sharp, with caps) not one hundred authors. Very inexperienced gentlemen are just trying not to cross the line and continue the text after the image markup, like so:
Natural getting this:
Okay, we need a wrap. It is set in a classic Habra layout using
Using this code we get:
So, STOP! Why sucked another paragraph that we previously had under the cut? He do not want us here, we want just the first sentence! To do this we need to use
And after publication, we get this:
If you want the button "kata" was not under the picture, and immediately after the text for which you prescribed flow, slide,
don't practice wrapping text on the left and the right image. As I said, the tape is left-aligned. If you put the image on the right, you, again, use many irritating move "not such as all".
Yes, I highlighted this paragraph separately because many people do not pay sufficient attention to it. Where to put cat it's yours. The question is how you do it.
The point is that after the publication of the article cut is displayed as an empty string. Thus, the code
Correct:
Wrong:
As you can see in the screenshot above, with a blank line before or after
Separately it is necessary to indicate the layout of headings, lists and code. The point here, again, to improve readability of text by the correct placement of blank lines. Unfortunately, for many layout articles behaves not obvious.
For example, after the header text you entered in the
If you put an empty string in the form of writing of the text after the heading, then you'll have double the empty string and the reader will get the impression that the title refers more to the text above it than below:
Also not quite logical behave and lists. Consider the following example.
the
As you can see the indent in the line above and under the list of available, everything is beautiful, the first item of the list is not merged with the text above. But in the layout it looks cool:
Many intuitively remove the empty line above and add it after the list, receiving:
In some cases, laid out a list of "clamped" between paragraphs, but then the items "back" text on themselves, merging with it, which greatly reduces the readability and perception is written as a transfer of something (and it lists the points transfer usually do).
Quotes behave exactly the same principle. When citing a blockquote is created using the automatic indent from below but not from above:
Review of the author of the coolest quote.
The same applies to code:
the
The commentary to the code.
And actually looks like this:
In the end I would like to say that the best understanding of the length of a paragraph of 3-5 lines (you can check via preview article). When translating English texts often combine several paragraphs of the original one, as many foreign authors have a craving for the thesis statement one or two sentences that develops on habré in the palisade of single-double lines. Well, with the rest, I think you can do it yourself, as beauty in the form of colored text and the more non-ferrous headers and I do not profess you do not recommend.
Compliance with the recommendations set out above will allow without special perversions to make your text pleasant to the eye and easy to read.
I hope I wrote something useful. Thank you all for your attention, Cap flew.
Article based on information from habrahabr.ru
It is possible for experienced authors seem to post captain, petty, or even how, because the main content, but for those who want to pass the sandbox and join in Habra-community, I am sure it will help not only to write something useful, but also beautiful your work to present.
Image To Attract Attention and left alignment
It just so happened that the entire tape Habrahabr left-aligned. For this reason, experienced authors leave a small image on the left or use pictures with width in 800-1000 px. Separately I want to note that almost the best is the ratio of KDPW 2: 1, i.e. image 800х400 px. Such proportion allows social media Manager social. networking not izgalyatsya with your picture (if not look for something more appropriate in size), and use the original without violating the author's ideas.
Even if your image has a smaller aspect ratio, for example, 800х700, try to reduce its height. The critical threshold is 500-600px except in exceptional cases, when KDPW and in truth "pulls" or contains useful information (screenshots of the interface, for example). It's all quite prosaic: not everyone has a monitor with a resolution of 1920x1080 and, for example, a user of a laptop with a maximum screen resolution of 1366x768 just do not appreciate all these beauties KDPW with size 1000x1000. But even in the case where the picture carries a payload in the form of text, for example, you can make it clickable, so everything will be easier.
Due to the fact that the images are seldom more than 500-800 pixels wide, everyone is trying to use left alignment. And you try, I'll explain why.
When the user scrolled tape articles, his focus shifted to the left side of the tape, at the beginning of headings, a list of hubs and buttons for voting. If you take a picture of small size in the center, or, God forbid, right, you're making a cheap marketing gimmick, "we don't like it and attract the reader's attention through annoying factors." In fact, such methods usually end up sad for the authors.
I will give an example based on my old article.
The correct location of the KDPW:
Incorrect location KDPW:
Very wrong location KDPW:
Wrapping text
Okay, that picture we understand. 2 to 1, not wider than 1000 px, left aligned. But if the picture is narrow, but appropriate to the text? What to do? To use the wrap, certainly. Here it was broken a lot of copies (such sharp, with caps) not one hundred authors. Very inexperienced gentlemen are just trying not to cross the line and continue the text after the image markup, like so:
Natural getting this:
Okay, we need a wrap. It is set in a classic Habra layout using
align="side" inside the embed code is:<img src="https://habrastorage.org/getpro/habr/post_images/832/8d3/0bd/8328d30bda5b014e848437e1eea3a654.jpg" alt="image" align="left"/>
Using this code we get:
So, STOP! Why sucked another paragraph that we previously had under the cut? He do not want us here, we want just the first sentence! To do this we need to use
<br> <br clear="side"/> that will clear a form from align="left" where we wish. In the edit form text code will look like this:And after publication, we get this:
If you want the button "kata" was not under the picture, and immediately after the text for which you prescribed flow, slide,
<br clear="side"/> under </cut&; GT;:don't practice wrapping text on the left and the right image. As I said, the tape is left-aligned. If you put the image on the right, you, again, use many irritating move "not such as all".
Setting Habra-kata
Yes, I highlighted this paragraph separately because many people do not pay sufficient attention to it. Where to put cat it's yours. The question is how you do it.
The point is that after the publication of the article cut is displayed as an empty string. Thus, the code
<cut/> should be sandwiched between the paragraphs of text that its integrity has not been compromised:Correct:
Wrong:
As you can see in the screenshot above, with a blank line before or after
<cut/> in the final version we get a double blank line, which is not nice and visual "breaks" the text. Headings, lists, text, and everything that they are looking for by trial and error
Separately it is necessary to indicate the layout of headings, lists and code. The point here, again, to improve readability of text by the correct placement of blank lines. Unfortunately, for many layout articles behaves not obvious.
For example, after the header text you entered in the
<h4> </h4> an empty string is not needed, because it is affixed by machineIf you put an empty string in the form of writing of the text after the heading, then you'll have double the empty string and the reader will get the impression that the title refers more to the text above it than below:
Also not quite logical behave and lists. Consider the following example.
the
-
the
- list Item number 1 the
- list Item number 2 the
- list Item number 3 the
- list Item number 4 the
- list Item number 5
As you can see the indent in the line above and under the list of available, everything is beautiful, the first item of the list is not merged with the text above. But in the layout it looks cool:
Many intuitively remove the empty line above and add it after the list, receiving:
In some cases, laid out a list of "clamped" between paragraphs, but then the items "back" text on themselves, merging with it, which greatly reduces the readability and perception is written as a transfer of something (and it lists the points transfer usually do).
Quotes behave exactly the same principle. When citing a blockquote is created using the automatic indent from below but not from above:
Cool quote.
Review of the author of the coolest quote.
The same applies to code:
the
Cool code here;
code;
even code;
the end of the code.
The commentary to the code.
And actually looks like this:
In the end I would like to say that the best understanding of the length of a paragraph of 3-5 lines (you can check via preview article). When translating English texts often combine several paragraphs of the original one, as many foreign authors have a craving for the thesis statement one or two sentences that develops on habré in the palisade of single-double lines. Well, with the rest, I think you can do it yourself, as beauty in the form of colored text and the more non-ferrous headers and I do not profess you do not recommend.
Compliance with the recommendations set out above will allow without special perversions to make your text pleasant to the eye and easy to read.
I hope I wrote something useful. Thank you all for your attention, Cap flew.
Комментарии
Отправить комментарий