User Tools

Site Tools


public:연습

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

public:연습 [2019/04/19 15:50] (current)
assui created
Line 1: Line 1:
 +====== Examples for the Wrap plugin ====== 
 +  
 +===== Basic syntax ===== 
 +  
 +The typed in uppercase tag ** %% <​WRAP>​ %% ** (or ** %% <​block>​ %% ** or ** %% <div> %% **) is transformed into ** ''​ div ''​ ** and is used for processing ** "​volume"​ ** containers, ** junk ** paragraphs, lists, tables and other similar elements. 
 +  
 +<​code>​ 
 +<WRAP classes width: language>​ 
 +Volume content 
 +</ Wrap> 
 +  
 +or 
 +<block classes width: language>​ 
 +Volume content 
 +</ block> 
 +  
 +or 
 +<div classes width: language>​ 
 +Volume content 
 +</ div> 
 +</ code> 
 +  
 +Typed in lowercase tag ** %% <​wrap>​ %% ** (or ** %% <​inline>​ %% ** or ** %% <​span>​ %% **) is transformed into ** ''​ span ''​ ** and is used for processing ** "​small"​ ** containers, text ** inside ** paragraphs, lists, tables and other similar elements. 
 +  
 +<​code>​ 
 +<wrap classes width: language>​ "​small"​ content </ wrap> 
 +  
 +or 
 +<inline classes width: language>​ "​small"​ content </ inline>​ 
 +  
 +or 
 +<span classes width: language>​ "​small"​ content </ span> 
 +</ code> 
 +  
 +:!: Please keep in mind that some effects ** cannot be obtained if spans are typed in lower case: ** 
 +  * ** alignment ** (including alignment options created by changing the direction of the text) 
 +  * ** multicolumns ** 
 +  * and ** width ** 
 +  
 +and the corresponding framing block is also not a float. 
 +  
 +===== Classes and Styles ===== 
 +  
 +==== Columns and Floats ==== 
 +  
 +Columns are easily added with the introduction of the class ''​ column ''​ and an indication of the width. For example: 
 +<​code>​ <WRAP column 30%> ... content ... </ WRAP> </ code> 
 +  
 +<WRAP column 30%> 
 +// ** __ Level 1 header emulation __ ** // 
 +  
 +You can emulate a level 1 heading using italics, bold or underline, for example: 
 +<​code>​ // ** __ Level 1 header emulation __ ** // </ code> 
 +  
 +// ** Level 2 header emulation ** // 
 +  
 +The heading of the 2nd level without underlining looks, for example, like this: 
 +<​code>​ // ** Level 2 header emulation ** // </ code> 
 +  
 +If you need text in both italic and bold, just use the opposite tags: 
 +<​code>​ ** // No title // ** </ code> 
 +</ Wrap> 
 +  
 +<WRAP column 30%> 
 +// ** __ Different variants of floats __ ** // 
 +  
 +Usually, only the class “column” is used, but in the case of more complex layout (when it comes to not only columns, but also other classes, for example [[# Blocks and notes | blocks and notes]]), you can use several types of float'​ov:​ 
 +  
 +  * ** ''​ column ''​ ** --- gives the same effect as ''​ left ''​ for languages ​​that use the letter from left to right, as well as ''​ right ''​ for languages ​​that use the letter from right to left; 
 +  * ** ''​ left ''​ ** allows you to move your framing block to the left; 
 +  * ** ''​ right ''​ ** allows the framing block to move to the right; 
 +  * ** "​center"​ ** places the framing block horizontally in the center of the page. 
 +</ Wrap> 
 +  
 +<WRAP column 30%> 
 +//​**__Width__**//​ 
 +  
 +The width can be specified (however, only in divs) in: ''​%,​ px, em, ex, pt, pc, cm, mm, in '',​ but in most cases you will use the following options: 
 +  
 +^ type ^ example ^ note ^ 
 +^ ''​% ''​ | ''​ '​30%'​ '| it makes sense to use in the "​rubber"​ layout | 
 +^ ''​ px ''​ | ''​ 420px ''​ | it makes sense to use with a fixed width of the design, and also if the container used contains images of a certain width | 
 +^ ''​ em ''​ | ''​ '​20em'​ '| makes sense to use if you want your framing box to scale depending on the font size in responsive designs | 
 +  
 +** A table ** inside a column or block will always have ** 100% width **. Thus, it is possible to scale the tables and change their location. 
 +</ Wrap> 
 +  
 +<wrap em> When using any of these classes to create “floating” elements, a situation may arise where the following text is thrown into a space where only “floating” containers should be placed ... </ wrap> 
 +  
 +<WRAP clear> </ WRAP> 
 +  
 +To avoid this, you just need to add ''​ %% <WRAP clear> </ WRAP> %% ''​ after the last column. 
 +  
 +The same options ** can also be used with spans (since each “floating” element is automatically a block element), however, this will not make much sense. :!: Usually specifying the width value for a span does not give any visible effect, but can be important when using floats. 
 +  
 +:!: Attention: Setting the width of an element often causes the element to look different and breaks the design in some browsers. If you are not an expert in website development,​ the problems of using different [[wp> Internet_Explorer_box_model_bug | block models]] may not be clear to you. Just try to test your columns in all major browsers and slightly reduce the initial width of the elements. 
 +  
 +All of these options also apply to framing blocks of the type [[# Blocks and Notes | blocks and Notes]] (see below). 
 +  
 +=== Multicolumns === 
 +  
 +<WRAP col3> 
 +In modern browsers (Firefox, Chrome and Safari) you can use multicolumn. Just use ** ''​ %% col2 %% ''​ ** for 2 columns, ** ''​ %% col3 %% ''​ ** for 3 columns, ** ''​ %% col4 %% ''​ ** for 4 columns, and ** ''​ %% col5 %% ''​ ** for 5 columns. 
 +  
 +:!: Note: creating a multicolumn inside the span will fail. 
 +</ Wrap> 
 +  
 +==== Alignment ==== 
 +  
 +You can use the following types of alignment:​ 
 +  
 +  * ''​ leftalign ''​ 
 +  * ''​ rightalign ''​ 
 +  * ''​ centeralign ''​ 
 +  * ''​ justify ''​ 
 +  
 +<WRAP centeralign>​ 
 +Left justified text ... 
 +</ Wrap> 
 +  
 +<WRAP rightalign>​ 
 +... and right hand. 
 +</ Wrap> 
 +  
 +<​code>​ 
 +<WRAP centeralign>​ 
 +Text aligned in the center ... 
 +</ Wrap> 
 +  
 +<WRAP rightalign>​ 
 +... and right hand. 
 +</ Wrap> 
 +</ code> 
 +  
 +:!: You can't add alignment to spans. 
 +  
 +==== Blocks and Notes ==== 
 +  
 +<WRAP round box 570px center>​ 
 +// ** __ round box 570px center __ ** // 
 +  
 +  * ''​ box ''​ creates a block around the container, by default using colors from the ''​ style.ini ''​ template file (''​ %% __ background_alt __ %% ''​ and %% __ text __ %% ''​);​ 
 +  * any of the classes ''​ info '',​ ''​ tip '',​ ''​ important '',​ ''​ alert '',​ ''​ help '',​ ''​ download '',​ ''​ todo ''​ creates a special container with a warning marked with the corresponding icon; 
 +  * for the classes “danger”,​ “warning”,​ “caution”,​ “notice”,​ “safety” the colors of the signal marking are used (without icons); 
 +  * ''​ round ''​ can be added to anything that has a colored underlay or border, however such code will work only in modern browsers (not in Internet Explorer). 
 +</ Wrap> 
 +  
 +<WRAP info 220px left> 
 +//​**Information**//​ 
 +<​code>​ <WRAP info> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP tip 220px left> 
 +//​**Hint**//​ 
 +<​code>​ <WRAP tip> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP important 220px left> 
 +//​**Important!**//​ 
 +<​code>​ <WRAP important>​ </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP alert 220px left> 
 +//**A warning!**//​ 
 +<​code>​ <WRAP alert> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP round help 220px left> 
 +//​**Help**//​ 
 +<​code>​ <WRAP round help> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP download 220px left> 
 +//​**Download**//​ 
 +<​code>​ <WRAP download>​ </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP todo 220px left> 
 +//**To-do list**// 
 +<​code>​ <WRAP todo> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP clear> </ WRAP> 
 +  
 +** Hazard alert: ** 
 +  
 +<WRAP danger 27% left> 
 +// ** Danger ** // 
 +<​code>​ <WRAP danger> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP warning 27% left> 
 +//**A warning**//​ 
 +<​code>​ <WRAP warning> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP caution 27% left> 
 +//​**Caution!**//​ 
 +<​code>​ <WRAP caution> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP round notice 27% left> 
 +//​**Attention!**//​ 
 +<​code>​ <WRAP round notice> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP round safety 27% left> 
 +//​**Safely**//​ 
 +<​code>​ <WRAP round safety> </ WRAP> </ code> 
 +</ Wrap> 
 +  
 +<WRAP clear> </ WRAP> 
 +  
 +Also blocks and notes can be used inside texts with spans like these: <wrap info> info </ wrap>, <wrap help> help </ wrap>, <wrap alert> alert </ wrap>, <wrap important>​ important < / wrap>, <wrap tip> tip </ wrap>, <wrap download>​ download </ wrap>, <wrap todo> todo </ wrap> and <wrap round box> round box </ wrap>, and also <wrap danger> danger </ wrap>, <wrap warning> warning </ wrap>, <wrap caution> caution </ wrap>, <wrap notice> notice </ wrap>, <wrap warning> </ wrap>. 
 +  
 +<​code>​ <wrap info> info </ wrap>, <wrap help> help </ wrap>, ... </ code> 
 +  
 +==== Marking ==== 
 +  
 +You can highlight the text <wrap hi> in bright color </ wrap>, <wrap lo> make it paler </ wrap> or <wrap em> specifically highlight </ wrap. 
 +  
 +<​code>​ You can highlight the text <wrap hi> in bright color </ wrap>, <wrap lo> make it paler </ wrap> or <wrap em> specifically highlight </ wrap>. </ code> 
 +  
 +:!: In some templates, such selection looks sloppy, so it is recommended to act on the situation. 
 +  
 +==== Miscellaneous ==== 
 +  
 +=== indent - indent right === 
 +  
 +<wrap indent> This text will be shifted to the right. </ wrap> 
 +  
 +<​code>​ <wrap indent> This text will be shifted to the right. </ wrap> </ code> 
 +  
 +=== outdent - indent left === 
 +  
 +<wrap outdent> This text will be shifted to the left. </ wrap> 
 +  
 +<​code>​ <wrap outdent> This text will be shifted to the left. </ wrap> </ code> 
 +  
 +=== prewrap === 
 +  
 +<WRAP prewrap 250px> 
 +<​code>​ 
 +Inside this block, words will be transferred to a new line, despite the fact that they are all written in one line. 
 +</ code> 
 +</ Wrap> 
 +  
 +<​code>​ 
 +<WRAP prewrap 250px> 
 +<​code>​ 
 +Inside this block, words will be transferred to a new line, despite the fact that they are all written in one line. 
 +</ code> 
 +</ Wrap> 
 +</ code> 
 +  
 +=== spoiler === 
 +  
 +It looks like a spoiler: <wrap spoiler> Darth Vader --- Luke's father. </ Wrap> 
 +  
 +<​code>​ It looks like a spoiler: <wrap spoiler> Darth Vader –– Luke’s father. </ wrap> </ code> 
 +  
 +To read the text inside the spoiler block, simply select it. 
 +  
 +=== hide - hide text === 
 +  
 +The following text is hidden: <wrap hide> Ivan, please check this sentence. </ Wrap> 
 +  
 +<​code>​ The following text is hidden: <wrap hide> Ivan, please check this sentence. </ wrap> </ code> 
 +  
 +:!: Attention: the hidden text will still be present in the source code, will be displayed in old browsers and will be indexed by search engines. Do not use spoilers to hide important data with it! 
 +  
 +=== pagebreak - page break === 
 +  
 +This breaks the page: <WRAP pagebreak>​ </ WRAP> 
 +  
 +<​code>​ This breaks the page: <WRAP pagebreak>​ </ WRAP> </ code> 
 +  
 +In the browser, this code does not produce any visual effect. However, when printing, thanks to the [[http://​reference.sitepoint.com/​css/​page-break-after| page break]] a new page is displayed. 
 +  
 +=== nopagebreak === 
 +  
 +With this code, you can avoid page breaks: <WRAP nopagebreak>​ a lot of related text (for example, a long table) </ WRAP> 
 +  
 +<​code>​ Using this code, you can avoid page breaks: <WRAP nopagebreak>​ a lot of linked text (for example, a long table) </ WRAP> </ code> 
 +  
 +In the browser, this code also does not produce any visual effect. Let's try [[http://​reference.sitepoint.com/​css/​page-break-inside| remove page break]] during printing. 
 +  
 +=== noprint === 
 +  
 +<wrap noprint> This text is visible on the screen, but it is not printed. </ wrap> 
 +  
 +<​code>​ <wrap noprint> This text is visible on the screen, but it is not printed. </ wrap> </ code> 
 +  
 +=== onlyprint === 
 +  
 +<wrap onlyprint>​ This text is not visible on the screen, but it is printed. </ wrap> 
 +  
 +<​code>​ <wrap onlyprint>​ This text is not visible on the screen, but it is printed. </ wrap> </ code> 
 +  
 +==== Combining and Embedding ==== 
 +  
 +You can combine and invest in each other all classes and all types of blocks. For example: 
 +  
 +<WRAP box 350px right: en> 
 +// ** __ The external block moves to the right __ ** // 
 +  
 +<WRAP 165px left> 
 +The internal nested block is moved to the left, it partially <wrap em hi> __ is дел separated and __ sub __-drawn, and also contains <wrap notice> __ note __ </ wrap> inside </ wrap>. 
 +</ Wrap> 
 +  
 +Text located inside the outer right block below the inner left block. 
 +  
 +<WRAP clear> </ WRAP> 
 +  
 +<WRAP round tip> 
 +Block with a rounded frame at the bottom, after ''​ clear ''​. 
 +</ Wrap> 
 +</ Wrap> 
 +  
 +<​code>​ 
 +<WRAP box 350px right: en> 
 +// ** __ The external block moves to the right __ ** // 
 +  
 +<WRAP 165px left> 
 +The internal nested block is moved to the left, it partially <wrap em hi> __ is дел separated and __ sub __-drawn, and also contains <wrap notice> __ note __ </ wrap> inside </ wrap>. 
 +</ Wrap> 
 +  
 +Text located inside the outer right block below the inner left block. 
 +  
 +<WRAP clear> </ WRAP> 
 +  
 +<WRAP round tip> 
 +Block with a rounded frame at the bottom, after ''​ clear ''​. 
 +</ Wrap> 
 +</ Wrap> 
 +</ code> 
 +  
 +===== Language and text direction ===== 
 +  
 +To change the language and the direction of the text in the framing block, you can simply add a colon and the code of the required language. For example: 
 +  
 +<​code>​ 
 +<Wrap: he> 
 +זה עברית. ((Translation:​ “This is Hebrew,” at least asserts <wrap: en> [[http://​translate.google.com/​|Google Translate]] </ wrap>​.)) 
 +</ Wrap> 
 +</ code> 
 +  
 +<Wrap: he> 
 +זה עברית. ((Translation:​ “This is Hebrew,” at least asserts <wrap: en> [[http://​translate.google.com/​|Google Translate]] </ wrap>​.)) 
 +</ Wrap> 
 +  
 +The text direction (''​ rtl ''​ --- from right to left or ''​ ltr ''​ - from left to right) will be automatically substituted and will depend only on the selected language. This list of currently supported languages ​​is taken from the page: <wrap: en> [[wpmeta>​ Template: List_of_language_names_ordered_by_code?​ Setlang = en | by ordered ordered]. (If you specify a language not included in the list, the tag simply does not work). 
 +  
 +===== About the translation ===== 
 +  
 +  - The translation was made by [[http://​www.proz.com/​translator/​822770NAnna Martynova]] and published under the license [[http://​creativecommons.org/​licenses/​by-sa/​3.0/​|CC-BY- SA]]. 
 +  - The description is relevant for the version [[https://​github.com/​selfselfinker/​dokuwiki_plugin_wrap/​releases|v2011-05-15]].
public/연습.txt · Last modified: 2019/04/19 15:50 by assui