Comments (10)
@dilip640 Have you tried using fontPadding ?
Explanation and examples listed here : Article
from compose-multiplatform.
@dilip640 Have you tried using fontPadding ? Explanation and examples listed here : Article
@gsrathoreniks This blog is specific to Android. I'm having issue in iOS. Also includeFontPadding
is not available in compose-multiplatform.
from compose-multiplatform.
@dilip640 Try this one out, I used in kotlin multi-platform project only and it solved my issue.
Pass this style to the text.
Note :
It's not an issue/bug it's just that fonts have their own padding and stylings. Depending on platform's default they sometimes can look little out of balance as in this particular case.LineHeightStyle
can be used to applyalignments
andtrim
.
TextStyle(lineHeightStyle = LineHeightStyle(alignment = alignment, trim = trim))
from compose-multiplatform.
@gsrathoreniks I know there are ways to remove the extra padding. But in multiplatform case the default should be right on each platform.
from compose-multiplatform.
maybe it's picking the platform default
from compose-multiplatform.
Full reproducer:
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun App() {
Text(
text = "Text",
modifier = Modifier
.background(Color.Yellow, shape = RoundedCornerShape(12.dp))
.padding(horizontal = 8.dp),
fontSize = 12.sp,
style = TextStyle.Default.copy(
lineHeight = 100.sp,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
)
),
)
}
As a solution, override lineHeightStyle
:
style = LocalTextStyle.current.copy(
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.Both,
)
),
from compose-multiplatform.
@igordmn it's by design, see https://issuetracker.google.com/issues/321872412
Android/other platforms don't have a diff during my tests. Centering highly depends on font's data/metrics. Different platforms use different font by default.
To get equal positioning - use the same font (from resources for example)
Also see my explanation here: #3453 (comment)
from compose-multiplatform.
Centering highly depends on font's data/metrics
In this case, yes, there is no issue.
Solution is either to use the same font or override lineHeightStyle
.
Different default font on different systems is by design.
from compose-multiplatform.
Rechecked this particular sample with default system fonts:
Full code is:
@Composable
fun App() {
Row(Modifier.systemBarsPadding()) {
androidx.compose.foundation.text.BasicText(
text = "Declared",
modifier = Modifier
.background(Color.Yellow, shape = RoundedCornerShape(12.dp))
.padding(horizontal = 8.dp),
style = TextStyle(
color = Color.Black,
fontSize = 12.sp
),
)
androidx.compose.material3.Text(
text = "Declared",
modifier = Modifier
.background(Color.Yellow, shape = RoundedCornerShape(12.dp))
.padding(horizontal = 8.dp),
style = TextStyle(
color = Color.Black,
fontSize = 12.sp
),
)
}
}
Regarding specifying only fontSize
(without lineHeightStyle
and lineHeightStyle
) inside MaterialTheme
, I'd follow Google's recommendation from the issue mentioned above:
To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so:
style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified)
, or create a customTypography
entirely.
from compose-multiplatform.
Also includeFontPadding is not available in compose-multiplatform.
and should not! See my explanation here: #2477 (comment)
from compose-multiplatform.
Related Issues (20)
- Crashed on Windows 7 HOT 2
- ComposePanel does not override `getAccessibleContext` HOT 4
- Support Kotlin 2.0.0-RC2 HOT 2
- Multiple configuration changes not tracked correctly when using qualifiers
- Support saving state for nested `NavHostController` HOT 18
- Compose generated string resources does not appear on testflight installed apps HOT 3
- [Test] `IllegalArgumentException` randomly throws from `performClick()` HOT 7
- Investigate new Apple polices regarding using restricted API
- Gradle tasks are using outputs without declaring an explicit or implicit dependency HOT 2
- DrawModifierNode is not synced with LazyColumn scroll position HOT 12
- sharedUserId breaks Compose Resources on Android HOT 2
- Cursor goes to start when BasicTextField gets empty when using TextAlign.Center HOT 1
- Layout flickers when resizing the window (regression) HOT 7
- ModalNavigationDrawer gestures easily consume clicks HOT 2
- Unable to access LocalLifecycleOwner HOT 2
- Way to open external activity or app from compose multiplatform for android,ios HOT 2
- [Dialog] - BasicAlertDialog weird sqeeze animation when showing soft keybaord HOT 2
- [Dialog] - BasicAlertDialog expand/collapse animation with TextField single line HOT 1
- Composables disappear on iPad Air 3 with iOS 16.3.1
- org.jetbrains.androidx.navigation:navigation-compose breaks Compose UI desktopTest HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from compose-multiplatform.