~ubuntu-ru-web/ubuntu-ru/dokuwiki-wrap-plugin

Normally you would only need the class ''column'', but for more sophisticated uses (not only for columns, but for any other classes, like [[#boxes and notes]] as well) you can have several kinds of "floats":

* **''column''** is the same as ''left'' in LTR languages and the same as ''right'' in RTL languages

* **''left''** will let you float your wrap on the left

* **''right''** will let the wrap float right

* **''center''** will position the wrap in the horizontal center of the page

</WRAP>

//**__Widths__**//

You can set any valid widths (but only on uppercase %%<WRAP>%%s): ''%, px, em, ex, pt, pc, cm, mm, in'', but most of the time you'd only want either

^type^e.g.^note^

^''%''|''30%''|makes sense in a liquid layout|

^''px''|''420px''|makes sense if your layout has a fixed pixel width or if your container contains images with a certain width|

^''em''|''20em''|makes sense if you like your wrap container to grow and shrink with the font size or if your layout is em-based|

A **table** inside a column or box will always be **100% wide**. This makes positioning and sizing tables possible.

</WRAP>

<wrap em>After using any of the float classes, you might come across something like this, where the following text protrudes into the space where only the floating containers should be ...</wrap>

... to prevent that, you should simply add

after your last column.

You **can** use the same options with small %%<wrap>%%s (as each element that floats is automatically a block level element), but it probably doesn't make too much sense. :!: Widths on spans (lowercase %%<wrap>%%s) normally do not work (by design), but can make sense, when it is floating.

:!: Attention: Widths can cause problems and will often look different and break in some browsers. If you're not a web developer, you might not understand any problems regarding the [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|box model]]. Just try to test your columns in all major browsers and make your widths smaller than you initially think they should be.

All of those options will also work in the [[#boxes and notes]] wraps (see below).

==== Alignments ====

You can use these different text alignments:

* ''leftalign''

* ''rightalign''

* ''centeralign''

* ''justify''

100

Center aligned text ...

101

</WRAP>

102

103

104

105

... and right aligned.

106

</WRAP>

107

108

<code>

109

110

111

Center aligned text ...

112

</WRAP>

113

114

115

116

... and right aligned.

117

</WRAP>

118

</code>

119

120

:!: You cannot add alignments to spans.

121

122

123

==== Boxes and Notes ====

124

125

126

127

//**__round box 570px center__**//

128

129

* ''box'' creates a box around the container and uses the colours from the template's ''style.ini'' as default colours (''%%__background_alt__%%'' and ''%%__text__%%'')

130

* any of the classes ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' will add a special note container with a corresponding icon

131

* the classes ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' use safety colours (and no icons)

132

* ''round'' can be added to anything with a background colour or a border and will only work in modern browsers (no Internet Explorer)

133

</WRAP>

134

135

136

137

138

//**Info**//

139

140

141

</WRAP>

142

143

144

145

146

//**Tip**//

147

148

149

</WRAP>

150

151

152

153

154

//**Important**//

155

156

157

</WRAP>

158

159

160

161

162

//**Alert**//

163

164

165

</WRAP>

166

167

168

169

170

//**Help**//

171

172

173

</WRAP>

174

175

176

177

178

//**Download**//

179

180

181

</WRAP>

182

183

184

185

186

//**Todo**//

187

188

189

</WRAP>

190

191

192

193

194

195

**Safety Notes:**

196

197

198

199

//**Danger**//

200

201

202

</WRAP>

203

204

205

206

//**Warning**//

207

208

209

</WRAP>

210

211

212

213

//**Caution**//

214

215

216

</WRAP>

217

218

219

220

//**Notice**//

221

222

223

</WRAP>

224

225

226

227

//**Safety**//

228

229

230

</WRAP>

231

232

233

234

235

You can use notes and boxes also inside text with the lowercase %%<wrap>%% like this:

236

<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 <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.

237

<wrap info>info</wrap>, <wrap help>help</wrap>, ...

238

239

==== Marks ====

240

241

You can mark text as <wrap hi>highlighted</wrap>, <wrap lo>less significant</wrap> and <wrap em>especially emphasised</wrap>.

242

243

You can mark text as <wrap hi>highlighted</wrap>, <wrap lo>less significant</wrap> and <wrap em>especially emphasised</wrap>.

244

245

:!: This might look ugly in some templates and should be adjusted accordingly.

246

247

==== Miscellaneous ====

248

249

=== Indent ===

250

251

<wrap indent>This text will appear indented.</wrap>

252

253

<wrap indent>This text will appear indented.</wrap>

254

255

=== Outdent ===

256

257

<wrap outdent>This text will appear "outdented".</wrap>

258

259

<wrap outdent>This text will appear "outdented".</wrap>

260

261

=== Prewrap ===

262

263

264

<code>

265

Inside this code block the words will wrap to a new line although they are all in one line.

266

</code>

267

</WRAP>

268

269

270

<code>

271

Inside this code block the words will wrap to a new line although they are all in one line.

272

</code>

273

</WRAP>

274

275

=== Spoiler ===

276

277

Here follows a spoiler: <wrap spoiler>Darth Vader is Luke's father.</wrap>

278

279

Here follows a spoiler: <wrap spoiler>Darth Vader is Luke's father.</wrap>

280

281

Just select the text in the spoiler box to be able to read its content.

282

283

=== Hide ===

284

285

The following text is hidden: <wrap hide>John, please revise that sentence.</wrap>

286

287

The following text is hidden: <wrap hide>John, please revise that sentence.</wrap>

288

289

:!: Warning: The text will still appear in the source code, in non-modern browsers and is searchable. Do not hide any security risky secrets with it!

290

291

=== Pagebreak ===

292

293

The following will add a pagebreak: <WRAP pagebreak></WRAP>

294

295

The following will add a pagebreak: <WRAP pagebreak></WRAP>

296

297

This has no effect on the browser screen. A [[http://reference.sitepoint.com/css/page-break-after|pagebreak]] will force a new page in printouts.

298

299

=== Nopagebreak ===

300

301

The following will try to avoid a pagebreak: <WRAP nopagebreak>much content, belonging together (like a long table)</WRAP>

302

303

The following will try to avoid a pagebreak: <WRAP nopagebreak>much content, belonging together (like a long table)</WRAP>

304

305

This also has no effect on the browser screen. It will try to [[http://reference.sitepoint.com/css/page-break-inside|avoid a page break]] in printouts.

306

307

=== Noprint ===

308

309

<wrap noprint>This text appears on the screen, but not in print.</wrap>

310

311

<wrap noprint>This text appears on the screen, but not in print.</wrap>

312

313

=== Onlyprint ===

314

315

<wrap onlyprint>This text does not appear on the screen, but only in print.</wrap>

316

317

<wrap onlyprint>This text does not appear on the screen, but only in print.</wrap>

318

319

==== Typography ====

320

321

I advice against using the following typography classes. It's better to create semantic classes that reflect their meaning instead.

322

323

* font family: ''sansserif'', ''serif'', ''monospace''

324

* font size: ''bigger'', ''muchbigger'', ''smaller''

325

* font colour: ''fgred'', ''fggreen'', ''fgblue'', ''fgcyan'', ''fgviolet'', ''fgyellow'', ''fggrey'', ''fgwhite'', ''fgblack''

326

* background colour: ''bgred'', ''bggreen'', ''bgblue'', ''bgcyan'', ''bgviolet'', ''bgyellow'', ''bggrey'', ''bgwhite'', ''bgblack''

327

328

329

==== Combining and Nesting ====

330

331

You can combine and nest all classes and types of boxes, e.g.

332

333

334

335

//**__Outer green box floats right__**//

336

337

338

339

Inner nested box floats left and is partly <wrap em hi>__em__phasized and __hi__ghlighted with nested <wrap bigger>__bigger__ text</wrap> inside</wrap>.

340

</WRAP>

341

342

Text inside outer right box, but beneath inner left box.

343

344

345

346

347

Round tip box underneath, after a ''clear''.

348

</WRAP>

349

</WRAP>

350

351

352

<code>

353

354

355

//**__Outer green box floats right__**//

356

357

358

359

Inner nested box floats left and is partly <wrap em hi>__em__phasized and __hi__ghlighted with nested <wrap bigger>__bigger__ text</wrap> inside</wrap>.

360

</WRAP>

361

362

Text inside outer right box, but beneath inner left box.

363

364

365

366

367

Round tip box underneath, after a ''clear''.

368

</WRAP>

369

</WRAP>

370

</code>

371

372

373

===== Language and Text Direction =====

374

375

You can change the language and the reading direction of a wrap container by simply adding a colon followed by the language code, like this:

376

377

<code>

378

379

380

זה עברית. ((<wrap :en>This means "This is Hebrew.", at least according to [[http://translate.google.com/|Google Translate]].</wrap>))

381

</WRAP>

382

</code>

383

384

385

386

זה עברית. ((<wrap :en>This means "This is Hebrew.", at least according to [[http://translate.google.com/|Google Translate]].</wrap>))

387

</WRAP>

388

389

The text direction (''rtl'', right to left or ''ltr'', left to right) will get inserted automatically and is solely dependent on the language. The list of currently supported languages is taken from: http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code

390

(If you specify a language not listed there, it simply won't do anything.)

Older »