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)
- Scrolling by wheel did not produce scroll offset to NestedScrollConnection HOT 2
- Support explicit dist names HOT 2
- How to use AndroidX ViewModels in Compose Desktop application? HOT 3
- Quickly dragging the window causes @Composable to stretch HOT 2
- Resizing the window leads to the UI elements scaling proportionally HOT 2
- Exception during generating code for following declaration HOT 1
- is compose multiplatform for web wasmJs support routing ? HOT 3
- UI Preview does not work inside Android Studio HOT 2
- SelectionContainer crashed when right click space area HOT 1
- (iOS) Selection Container shows keyboard while selecting text HOT 2
- `isSystemInDarkTheme()` not causing recomposition when using `UINavigationController` as wrapper on compose `UIViewController` HOT 6
- ModalBottomSheet no appearance animation in skiko targets HOT 3
- App crashes when launched on x86_64 iOS simulator after migrated to Kotlin 2.0 HOT 3
- MLKit linkPodDebugFrameworkIosArm64 FAILED HOT 2
- On the Web platform, VectorPainter cannot get the correct size and draw content when running inside other Painters HOT 1
- Screen flickering On WIndows Desktop HOT 2
- [iOS] org.jetbrains.compose.resources.MissingResourceException when running tests HOT 6
- LazyVerticalStaggeredGrid two columns with five items with difference horizontalArrangement, the last item sometimes on the left, sometimes on the right HOT 5
- Compose Desktop Gradle Plugin should honor JVM `toolchain` HOT 1
- graphicsLayer render resolution slower towards bottom of screen HOT 3
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.