Example: Boxes with text and math

Published 2006-11-24 | Author: Kjell Magne Fauske

Colorful rounded boxes seems to be an important part of most poster presentations. Here are a few examples on how to create boxes with text and math using PGF/TikZ. The easiest solution is to put a minipage environment inside a node.

Download as: [PDF] [TEX] • [Open in writeLaTeX]

$Boxes with text and math$

Do you have a question regarding this example, TikZ or LaTeX in general? Just ask in the LaTeX Forum.

\documentclass{article}

\usepackage{tikz}
\usetikzlibrary{shapes,snakes}
\usepackage{amsmath,amssymb}
\begin{document}



% Define box and box title style
\tikzstyle{mybox} = [draw=red, fill=blue!20, very thick,
    rectangle, rounded corners, inner sep=10pt, inner ysep=20pt]
\tikzstyle{fancytitle} =[fill=red, text=white]

\begin{tikzpicture}
\node [mybox] (box){%
    \begin{minipage}{0.50\textwidth}
        To calculate the horizontal position the kinematic differential
        equations are needed:
        \begin{align}
            \dot{n} &= u\cos\psi -v\sin\psi \\
            \dot{e} &= u\sin\psi + v\cos\psi
        \end{align}
        For small angles the following approximation can be used:
        \begin{align}
            \dot{n} &= u -v\delta_\psi \\
            \dot{e} &= u\delta_\psi + v
        \end{align}
    \end{minipage}
};
\node[fancytitle, right=10pt] at (box.north west) {A fancy title};
\node[fancytitle, rounded corners] at (box.east) {$\clubsuit$};
\end{tikzpicture}%
%
\tikzstyle{mybox} = [draw=blue, fill=green!20, very thick,
    rectangle, rounded corners, inner sep=10pt, inner ysep=20pt]
\tikzstyle{fancytitle} =[fill=blue, text=white, ellipse]
%
\begin{tikzpicture}[transform shape, rotate=10, baseline=-3.5cm]
\node [mybox] (box) {%
    \begin{minipage}[t!]{0.5\textwidth}
        Fermat's Last Theorem states that
        \[
            x^n + y^n = z^n
        \]
        has no non-zero integer solutions for $x$, $y$ and $z$ when $n > 2$.
    \end{minipage}
    };
\node[fancytitle] at (box.north) {Fermat's Last Theorem};
\end{tikzpicture}
%

\end{document}

Comments

#1 Wolfgang Gruber, January 29, 2009 at 7:22 p.m.

Hello Kjell Magne,

I tried to modify your example to produce old style computer paper for matrix printers and experienced the problem not being able to check for the end of the box. So I stripped down the code to the essential parts and included the explicit question as a comment. Please help.

Wolfgang

\documentclass{article}

\usepackage{tikz}

\usetikzlibrary{calc}

\usepackage{ifthen}

\begin{document}

% Define box and box title style

\tikzstyle{mybox} = [draw=red,very thick,
    rectangle, rounded corners, inner sep=10pt]

\tikzstyle{fancytitle} =[fill=red, text=white]

\begin{tikzpicture}

\node [mybox] (box){%

    \begin{minipage}{0.50\textwidth}
        To calculate the horizontal position the kinematic differential
        equations are needed.
        For small angles the following approximation can be used.

        To calculate the horizontal position the kinematic differential
        equations are needed.
        For small angles the following approximation can be used.
    \end{minipage}

};

\newlength{\yCoord}

\setlength{\yCoord}{0mm}

\newlength{\ymaxCoord}

\newlength{\rowHeight}

%How to set \rowHeight to the lineadvance ?

%How to set \ymaxCoord to the height of the minipage ?

%Is there a way to get these values out of the minipage ?

%And/Or is there a way to get these values from the (box.north west,box.south west)

\setlength{\rowHeight}{5mm}

\setlength{\ymaxCoord}{2cm}

\whiledo{\lengthtest{\yCoord < \ymaxCoord}}

{

\addtolength{\yCoord}{\rowHeight}

\draw  ($(box.north west)+(0,-\yCoord)$)--($(box.north east)+(0,-\yCoord)$);

}

\end{tikzpicture}%

    \end{document}

#2 Kjell Magne Fauske, January 30, 2009 at 12:37 p.m.

How to set \rowHeight to the lineadvance ?

Do you mean the line height? Not sure how to calculate this accurately. I'm not familiar enough with the way TeX breaks the text. If you know the height of the box you can probably find a decent estimate.

How to set \ymaxCoord to the height of the minipage ?

You can get this information from the node anchor coordinates like you suggested. Here is a macro I wrote a long time ago:

\makeatletter
\newdimen\tu@tmpa%
\newdimen\ydiffl%

% Compute the y difference between two coordinates
% Result is stored in the \ydiffl register
% Example
%   \coordinate (a) at (0,1);
%   \coordinate (b) at (0,3);
%   \ydiff{a}{b}
%   \node[minimum size=\ydiffl] {\the\ydiffl};
\newcommand\ydiff[2]{%
    \coordinate (tmpnamea) at (#1);%
    \coordinate (tmpnameb) at (#2);%
    \pgfextracty{\tu@tmpa}{\pgfpointanchor{tmpnamea}{center}}%
    \pgfextracty{\ydiffl}{\pgfpointanchor{tmpnameb}{center}}%
    \advance\ydiffl by -\tu@tmpa%
}
\makeatother

If you feed it the appropriate node coordinates it should compute the height of the box for you. Probably not the most elegant solution.

#3 Nick Papior Andersen, October 18, 2009 at 4:02 p.m.

Hi all & Kjeld

Amazing work... I tried puzzling a bit with it. And i have made some code which makes it easier to type the club suit and the title to the boxes. Check this code out. I really think it simplifies things a lot! And it brings many possibilities with it! :D

\documentclass{minimal} 
\usepackage{tikz}
\usetikzlibrary{shapes,decorations}
\usepackage{amsmath,amssymb}
\begin{document}

% We need to save the node
% Every append after command might be useful to have this code
\def\savelastnode{\pgfextra\edef\tmpA{\tikzlastnode}\endpgfextra}
\def\restorelastnode{\pgfextra\edef\tikzlastnode{\tmpA}\endpgfextra}
% Define box and box title style
\tikzstyle{mybox} = [draw=red, fill=blue!20, very thick,
    rectangle, rounded corners, inner sep=10pt, inner ysep=20pt]
\tikzstyle{fancytitle} =[fill=red, text=white]
\tikzstyle{club suit} = [append after command={%
    \savelastnode node[fancytitle,rounded corners] at (\tikzlastnode.east)%
    {$\clubsuit$}\restorelastnode }]
\tikzstyle{title} = [append after command={%
    \savelastnode node[fancytitle,right=10pt] at (\tikzlastnode.north west)%
    {#1}\restorelastnode}]

\begin{tikzpicture}
\node [mybox,club suit,title=Fancy title] (box){%
    \begin{minipage}{0.50\textwidth}
        To calculate the horizontal position the kinematic differential
        equations are needed:
        \begin{align}
            \dot{n} &= u\cos\psi -v\sin\psi \\
            \dot{e} &= u\sin\psi + v\cos\psi
        \end{align}
        For small angles the following approximation can be used:
        \begin{align}
            \dot{n} &= u -v\delta_\psi \\
            \dot{e} &= u\delta_\psi + v
        \end{align}
    \end{minipage}
};
% These are no longer needed! It is now situated in the (box) node command!
%\node[fancytitle, right=10pt] at (box.north west) {A fancy title};
%\node[fancytitle, rounded corners] at (box.east) {$\clubsuit$};
\end{tikzpicture}%
\end{document}

Hope this eases the TikZ-ing! :D

Kind regards Nick

#4 Kjell Magne Fauske, October 18, 2009 at 8:11 p.m.

@Nick: Thanks for sharing. Your solution is much more clever and elegant than mine.
#5 Erik, February 23, 2010 at 9:17 p.m.

wow, you guys are too good at this! Very clever! Nice solution for slides, etc.
#6 Erik, March 3, 2010 at 6:28 p.m.

Furthermore, this is a good solution to box equations with numbers without having to install the empheq package. This provides an easier way to emphasize stuff in a report. And it makes for great slides ofcourse. Again, really like this minipage solution!
#7 Glasgow, October 27, 2010 at 12:59 p.m.

This provides an easier way to emphasize stuff in a report. And it makes for great slides of course. Again, really like this minipage solution!
#8 Alexis, February 26, 2012 at 4:16 p.m.

I made a package out of your example, thanks a lot for sharing !

http://snouffy.free.fr/blog-en/index.php/post/2010/01/30/Nice-boxes-for-your-theorems-with-tikz

Alexis.
#9 Stefan Kottwitz, February 26, 2012 at 7:50 p.m.

Thanks Alexis, very useful! I just tested your package from your website. I just cannot write a comment there, perhaps a login is required.
#10 Marilou, March 30, 2013 at 3:06 a.m.

Let's speak a small about the physical activity side very first. Yet another critical accomplishment factor to a swift weight loss diet regime is when to eat these meals and how usually.
#11 Rodolfo, March 30, 2013 at 8:43 a.m.

Very few men have a completely straight penis as for the most part they are at least somewhat bent in some direction.
#12 Madge, March 31, 2013 at 6:18 p.m.

I have to say, I am more amazed by the so called generic spammer” than I am by the blatant spammer.

You may ask why Because at least the obvious spammer is completely open and honest with their spam! We can spot who they are. The so called generic spammer is a liar and also a faker! You can probably notice that I have very strong towards this group of charlatans
#13 Adam, April 25, 2013 at 3:48 p.m.

You've got a lot of spam comments here. Those ultra-positive comments that always have a strange spelling error are a sign that your internet security or website security are lacking. This could even be a way for malicious content, or advertising, to be placed onto your website without you noticing. Just be careful.
#14 www.bringnewshoes.com, April 30, 2013 at 9:02 p.m.

Excellent way of telling, and fastidious piece of writing to take data concerning my presentation subject matter, which i am going to convey in school.
#15 unknown, May 5, 2013 at 5:57 a.m.

Hi there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no backup.

Do you have any methods to prevent hackers?
#16 man, May 15, 2013 at 6:40 a.m.

Pretty! This was an incredibly wonderful article. Many thanks for supplying these details.
#17 Augustina, May 17, 2013 at 6:24 p.m.

Having read this I thought it was really informative. I appreciate you taking the time and energy to put this information together. I once again find myself personally spending a significant amount of time both reading and commenting. But so what, it was still worth it!
#18 custom publishing, May 17, 2013 at 8:47 p.m.

Hey! Someone in my Myspace group shared this website with us so I came to check it out. I'm definitely enjoying the information. I'm bookmarking and will be tweeting this to my followers! Superb blog and superb design and style.
#19 zcode system login, May 18, 2013 at 4:45 a.m.

Hi there, I do think your site may be having internet browser compatibility issues. Whenever I look at your website in Safari, it looks fine however when opening in Internet Explorer, it's got some overlapping issues. I merely wanted to give you a quick heads up! Besides that, fantastic blog!
#20 pirater un compte facebook, May 18, 2013 at 8:41 a.m.

Thanks for sharing your info. I really appreciate your efforts and I am waiting for your further write ups thank you once again.
#21 fdsafdsa, May 18, 2013 at 9:49 a.m.

This summer, Nike Sportswear will be from New York, London, Tokyo, Shanghai and Rio de Janeiro, running clubs and enthusiasts introduced five different color NIKE FREE Run + 2. The Nike Free Run + 2 city series continues the Nike Free Run + the classic shape, but also the interpretation of this a different kind of innovative sports products. Shanghai color section NIKE FREE Run + 2 since June 11 and is scheduled for NIKE flagship store in Shanghai, Juice Shanghai store and NPC Shanghai store listed for sale

2004 NIKE FREE and natural movement (natural motion) technology redefines the concept of running shoes. Nike Sports Research Lab and the Innovation Kitchen use of barefoot running research, design subversive of NIKE FREE. FREE different levels, where 0.0 is completely barefoot running,tiffany blue nikes is equivalent to the standard running shoes flexibility. Natural motion technology to enhance the power of the foot and ankle to improve foot joint range of motion, strengthening the balance, effectively disperse the pressure of running barefoot foot contact with the ground. The sole available for curved groove design also refer to the Nike Sports Research Lab biomechanics research.

2011 Nike Free Run + 2 be able to wrap the foot like a sock general, the upper with a highly breathable mesh fabric, unique asymmetric shoelace design can alleviate instep pressure and heel part of the center of pressure. Waffle shape with BRS1000 carbon rubber outsole, the shoes are guaranteed with incredible light weight and flexibility, to be bent extent. In this new design,tiffany free runs the Nike simulate the cross-sectional view of the anatomical structure of muscles, tendons and ligaments of the foot. In order to adapt to a variety of adverse conditions in the city run,http://www.neerlandsbest.com using a rubber toe cap makes the shoes more versatile and more durable. Synthetic fleece fabric This excellent classic running shoes fashion sense. Reflective shoelace night wearing running provides convenience.

The latest tiffany blue nike shoes city series, each one can find traces of the modern city. Unlike usually dirty white, this series is speckled gray Phylite in the end. The color is integrated into the local characteristics of each city. Deep red wine on behalf of Shanghai, China, pine green symbol of Rio de Janeiro, Brazil, anthracite New York, Black Japan Tokyo street style, while London's version is a gentleman khaki.
#22 best poker sites, May 18, 2013 at 3:28 p.m.

apologize to family and protagonists why the passed so much time online cachexy money on virtual poker. best online poker sites But what about sensing - can't I get gaming for $50 likewise a huge $50 K value in event of victorious.
#23 Metro Last Light Trainer, May 18, 2013 at 4:47 p.m.

magnificent points altogether, you just gained a brand new reader. What may you recommend about your submit that you simply made some days in the past? Any certain?
#24 online poker sites, May 18, 2013 at 9:52 p.m.

Nevada's regulator subscribed a law note letting online poker but the gets out sealed off indictment and torn with hazarding misdemeanors, money washing and depository financial institution pretender done their on-line poker trading operations. poker sites This is why the players--especially fetching players--are incredulous as to why the the 11 identified suspects constituted nailed today.
#25 your feet ache, May 19, 2013 at 4:17 a.m.

What does diabetes has to do with foot pain?
#26 steroid abuse symptoms, May 19, 2013 at 8:14 a.m.

That is very fascinating, You are an overly skilled blogger. I have joined your feed and sit up for seeking more of your excellent post.

Also, I've shared your website in my social networks
#27 wonga, May 19, 2013 at 8:59 a.m.

On the inner is where major marketplace are trusted to achieve a consummate and low-cost loan for you. http://www.wongacashloans. co.uk They will approve your loan covering now sanctioned and immediate payment be a detracting component, and disdain a howling endeavour by HTC hither, it sure as shooting is of course of study we feel likewise close to the Trick.
#28 1 oz gold, May 19, 2013 at 12:47 p.m.

I do not even know how I ended up here, but I thought this post was great. I don't know who you are but certainly you are going to a famous blogger if you aren't already ;) Cheers!
#29 Hildegarde, May 19, 2013 at 1:56 p.m.

We have gone ahead and added a hyperlink back to your webpage from one of my clients requesting it. We have used your website URL: http://www.texample.net/tikz/examples/boxes-with-text-and-math/ and blog title: Boxes with text and math | TikZ example to be sure you get the correct anchor text. If you woud like to see where your hyperlink has been placed, please contact me at: hildegardemathis@web. de. Thank you
#30 msu.ru, May 19, 2013 at 5:47 p.m.

Having read this I believed it was really enlightening. I appreciate you spending some time and effort to put this information together. I once again find myself personally spending a lot of time both reading and posting comments. But so what, it was still worthwhile!
#31 Weber grill parts, May 20, 2013 at 4:36 p.m.

Somebody necessarily lend a hand to make seriously articles I would state. That is the very first time I frequented your web page and up to now? I surprised with the analysis you made to create this particular submit extraordinary. Excellent process!
#32 Kathrin, May 21, 2013 at 1:28 a.m.

Valuable info. Lucky me I found your website accidentally, and I am shocked why this coincidence didn't happened earlier! I bookmarked it.
#33 www.elitebinaryoptions.co.uk/, May 21, 2013 at 2:51 a.m.

The just one left hand is the gun take be commensurate with our expectations, but in some cases, those expectations may be incorrect.

what is binary trading Normal 0 off-key faux off-key EN-US $400 you can learn to deal in as little as two or three months.
#34 reputation management for individuals, May 21, 2013 at 8:38 a.m.

I am in fact glad to read this website posts which carries tons of useful information, thanks for providing these kinds of statistics.
#35 internet marketing consultant houston, May 21, 2013 at 1:34 p.m.

Your post will be rather good and I'm sure some will find it interesting because it's about a topic that's as widely discussed as others. Some may even find it useful.Thanks so much for your post.
#36 digital marketing agencies, May 21, 2013 at 1:34 p.m.

This is a really quality post.I find this information through Google Search engine. I read your Article very carefully it is really very informatic Article,I bookmarked your site.
#37 pill, May 22, 2013 at 7:23 a.m.

Great post. If they are familiar with each other, it should make for an interesting game.
#38 natural pills, May 22, 2013 at 7:23 a.m.

Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. There tend to be not many people who can certainly write not so simple posts that artistically. Continue the nice writing..
#39 cambogia-weightloss, May 22, 2013 at 7:23 a.m.

Liked to study your website. I would like to recommend you that traffic show most people study weblogs on Monday. So it should motivate blog writer to create new create ups over the few days mainly.
#40 garciniacambogiawheretobuy1, May 22, 2013 at 7:24 a.m.

I have been in look for of some information about it almost three time. You served me a lot indeed and analyzing this your publish I have found many new and useful information about this topic.
#41 sample marketing plan, May 22, 2013 at 4:35 p.m.

I stripped down the code to the essential parts and included the explicit question as a comment. Please help.
#42 Panic Attack}, May 22, 2013 at 11:25 p.m.

Pretty section of content. I just stumbled upon your site and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Anyway I'll be subscribing to your feeds and even I achievement you access consistently fast.
#43 dry scalp treatments, May 23, 2013 at 3:02 a.m.

With havin so much written content do you ever run into any problems of plagorism or copyright infringement? My blog has a lot of unique content I've either authored myself or outsourced but it appears a lot of it is popping it up all over the internet without my agreement. Do you know any techniques to help protect against content from being ripped off? I'd genuinely appreciate it.
#44 online weight loss, May 23, 2013 at 5:29 a.m.

Good analysis you have here garcinia cambogia is looking just like the latest thing. I"m all about online weight loss as of late.
#45 Bubble mower, May 23, 2013 at 7:03 a.m.

Awesome blog! Do you have any hints for aspiring writers?

I'm hoping to start my own blog soon but I'm a little lost on everything.

Would you recommend starting with a free platform like Wordpress or go for a paid option? There are so many choices out there that I'm totally confused .. Any ideas? Appreciate it!
#46 steroid medication withdrawal symptoms, May 23, 2013 at 10:14 a.m.

Great post however I was wondering if you could write a litte more on this topic? I'd be very grateful if you could elaborate a little bit more. Appreciate it!

Example: Boxes with text and math

Comments

Post a comment

Navigation

Example: Boxes with text and math

Comments

Post a comment

Navigation

Features

Tags